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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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设计模式 Singleton(单例模式)
2011/06/26 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
关于js类的定义
2011/06/28 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python远程登录代码
2008/04/29 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python操作excel的方法
2018/08/16 Python
python实现自动登录
2018/09/17 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
房地产开发计划书
2014/01/10 职场文书
车辆安全检查制度
2014/01/12 职场文书
学习委员自我鉴定
2014/01/13 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
学生退学证明
2015/06/23 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python