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。