JavaScript日期库date-fn.js使用方法解析


Posted in Javascript onSeptember 09, 2020

用JavaScript处理日期并不容易。因此,如果您查看大多数应用程序的 package.json 文件,通常会在其中找到像 Moment.js 这样的库。

它对开发人员对解析/格式化/计算日期而言不再那么艰巨,但 Moment.js 是最早臭名昭著的库之一。

但是您知道一个名为 date-fns 的库吗?

JavaScript日期库date-fn.js使用方法解析

date-fn官网

date-fns 通常被认为是 Moment.js 的一个有价值的替代品。不仅因为它提供了相同的特性集,而且它还吸引了函数式程序员。

安装 date-fns

您可以使用npm/yarn安装date-fns,官方网站:https://date-fns.org/

# Using npm
$ npm install date-fns

# Or using yarn
$ yarn add date-fns

格式化Date

格式化日期是 Moment.js/date-fns 之类的库的基本功能,这是因为原生JavaScript没有简单的方法来处理此问题。

date-fns使用类似于Moment.js的字符串模式:

const format = require('date-fns/format');
const stPattysDay = new Date('2020/03/17');
const formattedDate1 = format(stPattysDay, 'MM/dd/yyyy');
const formattedDate2 = format(stPattysDay, 'MMMM dd, yyyy');

console.log(formattedDate1);
// => "03/17/2020"

console.log(formattedDate2);
// => "March 17, 2020"

就这么简单!有很多方法可以格式化日期,使它们看起来与您希望的完全一样。

加/减日期

现在我们可以格式化日期了,那么对日期执行加减法呢?有几个函数可以做到这一点:

  • addDays - 加天
  • subDays - 减天
  • addWeeks - 加周
  • subWeeks - 减周
  • addMonths - 加月
  • subMonths - 减月

在下面的例子中,我们在一个指定的日期上加上1年:

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');

const stPattysDay = new Date('2020/03/17');
const stPattysDayNextYear = addYears(stPattysDay, 1);
const formattedDate = format(stPattysDayNextYear, 'MMMM dd, yyyy');

console.log(formattedDate);
// => "March 17, 2021"

本地化和国际化

格式化很简单,但是locale呢?我们知道用户将从世界各地访问您的网站,我们不想假设他们说我们的母语。

为此,我们可以导入特定的语言环境插件:

const format = require('date-fns/format');
const russianLocale = require('date-fns/locale/ru');

const stPattysDay = new Date('2020/03/17');
const formattedDate = format(stPattysDay, 'MMMM dd, yyyy', { locale: russianLocale });

console.log(formattedDate);
// => "марта 17, 2020"

国际化支持也很好

JavaScript日期库date-fn.js使用方法解析

比较两个日期

对于一个日期操作库来说,计算两个日期之间的差的能力是非常重要的。date-fns提供了几个函数来计算这个值。

例如,我们可以计算从1月1日到圣诞节的天数(以及“营业日”!):

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');
const differenceInDays = require('date-fns/differenceInDays');
const differenceInBusinessDays = require('date-fns/differenceInBusinessDays')

const startDate = new Date('2020/01/01');
const endDate = new Date('2020/12/24');
const daysBetween = differenceInDays(endDate, startDate);
const workdaysBetween = differenceInBusinessDays(endDate, startDate);

console.log(daysBetween);
// => 358

console.log(workdaysBetween);
// => 256

date-fns是轻量级的

用Moment.js的最大弊端之一是,它的API无法导入单个函数。

const moment = require('moment');
const formattedDate = moment(new Date()).format('MM/DD/YYYY');

console.log(formattedDate);
// => "03/17/2020"

使用date-fns,您只需获取所需的特定功能(与Lodash相似):

const format = require('date-fns/format');
const formattedDate = format(new Date(), 'MM/dd/yyyy');

console.log(formattedDate);
// => "03/17/2020"

这使得date-fns的依赖性比Moment.js小得多,有关Moment.js与date-fns的捆绑包大小,请参见下图:

JavaScript日期库date-fn.js使用方法解析

Source: BundlePhobia

总结

date-fns目前似乎比moment .js得到了更多的开发工作,因此,它确实维护得很好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
You might like
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python定义一个Actor任务
2020/07/29 Python
如何用Python绘制3D柱形图
2020/09/16 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
上级检查欢迎词
2014/01/18 职场文书
项目经理聘任书
2014/03/29 职场文书
工作建议书范文
2014/05/13 职场文书
条幅标语大全
2014/06/20 职场文书
医院科室评语
2015/01/04 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python