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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Javascript实现时间倒计时功能
Nov 17 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
E路文章系统PHP
2006/12/11 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
python 剪切移动文件的实现代码
2018/08/02 Python
django的model操作汇整详解
2019/07/26 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
新学期决心书
2014/03/11 职场文书
陈欧广告词
2014/03/14 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
幼儿园开学通知
2015/04/24 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js