moment、dayjs、date-fns时间日期库比较

moment、dayjs、date-fns 是三个较为广泛使用的时间库。

安装

三个库的安装分别如下：

npm install moment
npm install dayjs
npm install date-fns

在页面引入：

<script src="/node_modules/moment/min/moment.min.js"></script>
<script src="/node_modules/dayjs/dayjs.min.js"></script>
<!-- date-fns 不支持全局引入 -->

转换

moment:

moment(); // 当前时间
moment(new Date()); // 根据Date对象创建
moment("2018-07-04 15:16:45.869"); // 根据字符串创建
moment("2018-07-04 15:16:45.869", "YYYY-MM-DD HH:mm:ss.SSS"); // 根据字符串创建(推荐)
moment('2018-07-04T07:16:45.869Z'); // 根据JSON格式创建
moment(1530688605869); // 根据毫秒创建

dayjs:

dayjs(); // 当前时间
dayjs(new Date()); // 根据Date对象创建
dayjs("2018-07-04 15:16:45.869"); // 根据字符串创建
dayjs('2018-07-04T07:16:45.869Z'); // 根据JSON格式创建
dayjs(1530688605869); // 根据毫秒创建

date-fns:

import { parse } from 'date-fns';

parse(new Date()); // 根据Date对象创建
parse("2018-07-04 15:16:45.869"); // 根据字符串创建
parse('2018-07-04T07:16:45.869Z'); // 根据JSON格式创建
parse(1530688605869); // 根据毫秒创建

基本操作

moment:

moment().add(7, 'day'); // 增大7天
moment().subtract(7, 'year'); // 减小7年
moment().startOf('week'); // 当前的星期一
moment().endOf('month'); // 当前的月末

dayjs:

dayjs().add(7, 'day'); // 增大7天
dayjs().subtract(7, 'year'); // 减小7年
dayjs().startOf('week'); // 当前的星期一
dayjs().endOf('month'); // 当前的月末

date-fns:

import { parse, addDays, subYears, startOfWeek, endOfMonth } from 'date-fns';

const date = new Date();
addDays(date, 7); // 增大7天
subYears(date, 7); // 减小7年
startOfWeek(date); // 当前的星期一
endOfMonth(date); // 当前的月末

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

格式化

moment:

moment().format('YYYY-MM-DD HH:mm:ss');

dayjs:

dayjs().format();

date-fns:

format(new Date(), 'yyyy-MM-dd HH:mm:ss');

总结

moment、dayjs、date-fns三个库都能满足常见的需求，但是存在如下特点：

• moment 的功能强大但是体积也最大，moment.min.js 的体积为51K，dayjs.min.js 体积为7K，date-fns由于是模块化加载，体积可以最小化；
• dayjs 和 moment 的接口几乎完全一致，相互切换的学习成本极低，date-fns接口风格差异较大；

从功能上看，dayjs、date-fns 基本上可以替代moment，同时可以大幅减小app的体积。如果考虑的兼容性，可以优先考虑dayjs，喜欢模块化的朋友可以考虑date-fns。