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

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

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

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

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"

国际化支持也很好

比较两个日期

对于一个日期操作库来说，计算两个日期之间的差的能力是非常重要的。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的捆绑包大小，请参见下图：

Source: BundlePhobia

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。

    复制代码 代码如下: //传入从数据库中取出的日期类型数据 function getformatdate(d){ var formate_datetime; var array = d.split(" "); var date = array[0]; var time = array[1]; var array_date = date.split("-"); var array_time = time.split(":"); var second

  • 原生js实现日期选择插件

    最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件.间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继承方式理解不深刻,一定有更优雅的方式再优化下这份粗糙的代码,各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方,有批评指正让我有动力继续写博客嘛! 先说下这个插件的功能:功能很简单,目前只实现了选择一个日期(当然可以赋初始值,默认是当前日期),选择跨月日期时,会有一个粗糙的动画效果,效果

  • js实现时间日期校验

    本文实例为大家分享了js实现时间日期校验的具体代码,供大家参考,具体内容如下 1. 通用的时间校验方式 $.validator.addMethod("validatestart", function(value, element) { var start = new Date($('#startTime').val()).getTime(); var end = new Date($('#endTime').val()).getTime(); if(end < start){ r

  • 5个最佳的Javascript日期处理类库分享

    5个最佳的Javascript日期处理类库分享

    在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法.当然如果大家有时间的话,完全可以自己开发和编写需要的方法,但是有效的使用别人已经开发好的类库肯定是一个更好的处理方式,没有必要什么都原创吧,君子善假于物也.今天这里我们收集了5个最佳的日期处理函数类库,希望对于大家有帮助,如果你喜欢我们的文章,请大家给我们留言,谢谢! 1. XDate 这个类库是javascript本地日期对象

  • 日期处理的js库（迷你版）--自建js库总结

    日期处理的js库（迷你版）--自建js库总结

    接口+继承+代码优化思想 先分享下我觉得一个很不错的js编程小技巧,达到很大的代码共用性! 因为很多js库会在原生的对象上进行直接原型扩展,但这是很不好的习惯,不仅加重了每个新实例对象的内存消耗,而且容易造成污染性误解(以为有这东西)!而这也是建js库一个准则:尽量少的原型扩展,特别是越根部的对象! js建库准则 js建库准则(Dean Edwards在开发base2时候的一些体会)翻译版:http://biaoge.me/2009/12/239 js建库学习好地方:http://ejohn.o

  • Moment.js 不容错过的超棒Javascript日期处理类库

    使用这个类库,可以帮助你有效的处理相关日期.希望大家喜欢! 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date 日期处理:加,减日期 日期显示:包括相对时间显示的日期显示选项 其它内建的功能,例如,保存,timezone offset和i18n支持 可以作为node.js的一个模块 完整的文档介绍 如何使用? 复制代码 代码如下: var now = moment(); console.log(now.format

  • javascript实现时间日期的格式化的方法汇总

    有的时候,我们需要一定格式的 时间 比如 2017-05-12 08:48 这样的格式. 上代码先 时间格式化 第一种 function formatDate(time){ var date = new Date(time); var year = date.getFullYear(), month = date.getMonth() + 1,//月份是从0开始的 day = date.getDate(), hour = date.getHours(), min = date.getMinute

  • js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期

    js 获取 本周.上周.本月.上月.本季度.上季度的开始结束日期 /** * 获取本周.本季度.本月.上月的开始日期.结束日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay(); //今天本周的第几天 var nowDay = now.getDate(); //当前日 var nowMonth = now.getMonth(); //当前月 var nowYear = now.getYear(); //当前年 nowY

  • JS库之wow.js使用方法

    JS库之wow.js使用方法

    近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简单~~ 需要配合Animated.css使用 方法如下: 1.引用wow.js或者wow.min.js 和 animate.css 2.在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具体所表示的含

  • JavaScript日期对象(Date)基本用法示例

    JavaScript日期对象(Date)基本用法示例

    本文实例讲述了JavaScript日期对象(Date)基本用法.分享给大家供大家参考,具体如下: 1.获取当前日期: document.write("Current time: "+new Date()); 2.获取时间戳(毫秒): document.write(new Date().getTime()); 3.设置年月日(年为必选,月日为可选): var d = new Date(); d.setFullYear(2016,3,16) document.write(d); docum

  • Javascript 日期对象Date扩展方法

    今天在网上摘抄了些js中操作日期的相关方法,现在与大家分享一下. 复制代码 代码如下: <script type="text/javascript"> Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth() + 1, //月份 "d+" : this.getDate(), //日 "h+" :

  • Javascript日期格式化format函数的使用方法

    前言 Javascript日期格式化在日常开发中还是挺常见的,那么下面就给大家分享Javascript时间格式format函数的两种使用方法示例,一起来看看. 方法一 Date.prototype.pattern=function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours()%12 == 0 ? 1

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

    用JavaScript处理日期并不容易.因此,如果您查看大多数应用程序的 package.json 文件,通常会在其中找到像 Moment.js 这样的库. 它对开发人员对解析/格式化/计算日期而言不再那么艰巨,但 Moment.js 是最早臭名昭著的库之一. 但是您知道一个名为 date-fns 的库吗? date-fn官网 date-fns 通常被认为是 Moment.js 的一个有价值的替代品.不仅因为它提供了相同的特性集,而且它还吸引了函数式程序员. 安装 date-fns 您可以使用n

  • Javascript日期对象的dateAdd与dateDiff方法

    复制代码 代码如下: Date.prototype.dateAdd = function(interval,number) { var d = this; var k={'y':'FullYear', 'q':'Month', 'm':'Month', 'w':'Date', 'd':'Date', 'h':'Hours', 'n':'Minutes', 's':'Seconds', 'ms':'MilliSeconds'}; var n={'q':3, 'w':7}; eval('d.set'

  • JavaScript或jQuery 获取option value值方法解析

    1.html <div class="form-group"> <label>保险公司</label> <select class="form-control" id="testSelect"> <option value="平安">平安保险</option> <option value="太平洋">太平洋保险</op

  • jQuery分页插件jquery.pagination.js使用方法解析

    jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q

  • javascript工厂模式和构造函数模式创建对象方法解析

    工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(本书后面还将讨论其他设计模式及其在JavaScript 中的实现).考虑到在ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子所示. function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName

  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

随机推荐