Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣. 如果您曾經用過 Moment.js, 那么您已經知道如何使用 Day.js。簡單地說，只要你會Moment.js，那么你就會Day.js!
但是我們知道的，Moment.js 的大小是200多KB,而Day.js的大小卻是2 KB，瘦身很多但卻幾乎擁有同樣強大的 API。
現在框架基本上都是多端應用的了，所以在ABP框架中整合Winform管理端、Vue&element的BS前端，以及公司動態網站用於發布產品和網站信息等都是常見的應用，有時候，我們還需要根據功能的需要，增加一些小程序的支持，這些對於Web API后端來說，都是很容易接入的應用處理。
而基於Vue + Element 的前端界面，前端功能模塊包括用戶管理、組織機構管理、角色管理、菜單管理、功能管理及權限分配，日志管理、字典管理、產品管理等管理功能，可實現用戶的功能及數據權限進行控制管理。
公司動態門戶網站，有時候用於我們發布網站信息和產品信息的一個門戶網站，采用了Bootstrap-Vue界面組件，由於大多數門戶網站都是基於Bootstrap柵格系統的，因此基於最新Bootstrap-Vue界面組件也就是最佳選擇的了，而且可以重用很多Bootstrap的網站模板案例。這樣也同時保持了前端模塊同時也是基於Vue的，摒棄了以前基於JQuery的繁瑣操作DOM處理。
由於現在微信小程序的廣泛應用，有時候我們針對一些業務模塊功能，可以根據需要推出一些小程序應用場景，這些對接我們的統一授權系統，以及統一的WebAPI調用機制即可滿足。
而這些基於Vue的前端，采用類庫對日期格式化，或者進行轉換的需求場景很多，因此我們我們需要借助JS類庫進行日期的處理，比較好的推薦使用day.js的處理。
1、day.js的安裝和使用
安裝day.js
npm install dayjs -s
然后在項目代碼中引入即可：
import dayjs from "dayjs"; // 導入日期js 或者 var dayjs = require('dayjs')
import * as dayjs from 'dayjs' import * as isLeapYear from 'dayjs/plugin/isLeapYear' // 導入插件 import 'dayjs/locale/zh-cn' // 導入本地化語言 dayjs.extend(isLeapYear) // 使用插件 dayjs.locale('zh-cn') // 使用本地化語言
詳細了解可以參考地址：https://dayjs.fenxianglu.cn/ 或者 https://dayjs.gitee.io/zh-CN/ 或者 https://github.com/iamkun/dayjs
Day.js 支持幾十個國家語言，但除非手動加載，多國語言默認是不會被打包到工程里。但你可以隨意在各個語言之間自由切換：
dayjs('2018-05-05').locale('zh-cn').format() // 在這個實例上使用簡體中文
直接調用 dayjs() 將返回一個包含當前日期和時間的 Day.js 對象。
var now = dayjs()
可以對調用dayjs對格式進行處理或者轉換。
dayjs("12-25-1995", "MM-DD-YYYY")
dayjs('2018 三月 15', 'YYYY MMMM DD', 'zh-cn')
dayjs('1970-00-00', 'YYYY-MM-DD').isValid() // true
dayjs('1970-00-00', 'YYYY-MM-DD', true).isValid() // false
dayjs('1970-00-00', 'YYYY-MM-DD', 'es', true).isValid() // false
默認情況下，Day.js 只包含核心的代碼，並沒有安裝任何插件.
您可以加載多個插件來滿足您的需求，例如官方提供的插件就有：
- AdvancedFormat 擴展了 dayjs().format API 以支持更多模版
- RelativeTime 增加了 .from .to .fromNow .toNow 4個 API 來展示相對的時間 (e.g. 3 小時以前).
- IsLeapYear 增加了 .isLeapYear API 返回一個 boolean 來展示一個 Dayjs's 的年份是不是閏年.
- WeekOfYear 增加了 .week() API 返回一個 number 來表示 Dayjs 的日期是年中第幾周.
- IsSameOrAfter 增加了 .isSameOrAfter() API 返回一個 boolean 來展示一個時間是否和一個時間相同或在一個時間之后.
- IsSameOrBefore 增加了 .isSameOrBefore() API 返回一個 boolean 來展示一個時間是否和一個時間相同或在一個時間之前.
Day.js 支持像這樣的鏈式調用：
dayjs().add(7, 'day')
dayjs('2019-01-25').add(1, 'day').subtract(1, 'year').year(2009).toString()
Day.js 對象還有很多查詢的方法。
Is Before表示 Day.js 對象是否在另一個提供的日期時間之前。
dayjs().isBefore(dayjs('2011-01-01')) // 默認毫秒
dayjs().isBefore('2011-01-01', 'year')
Is Same 檢查一個 Dayjs 對象是否和另一個 Dayjs 對象時間相同。
Is After 表示 Day.js 對象是否在另一個提供的日期時間之后。
還有其他查詢時間區間的函數，如下所示。
如下面一個應用代碼函數:
/** * 當前日期gantt狀態 * row: object 當前行信息 * date: string 當前格子日期 * unit: string 時間單位，以天、月、年計算 */ dayGanttType(row, date, unit = "days") { let start_date = row.startTime; let end_date = row.endTime; let between = dayjs(date).isBetween(start_date, end_date, unit); if (between) { return "item-on"; } let start = dayjs(start_date).isSame(date, unit); let end = dayjs(end_date).isSame(date, unit); if (start && end) { return "item-on item-full"; } if (start) { return "item-on item-start"; } if (end) { return "item-on item-end"; } },
2、Moment.js的安裝和使用
Moment.js是一個輕量級的JavaScript時間庫，它方便了日常開發中對時間的操作，提高了開發效率。 moment.js作為日期處理工具，雖然它和day.js對比顯得有點笨重，不過依舊很多項目在廣泛的使用者。
npm的安裝如下處理。
npm install moment --save
實例代碼
var now = moment(); //取當前時間 now.format('YYYY-MM-DD'); //格式化輸出 var day = moment("9/12/2010 19:05:25", "MM/DD/YYYY HH🇲🇲ss"); //字符串轉換成時間格式
詳細的官方提供案例如下所示。
日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 14日 2022, 3:23:46 下午
moment().format('dddd'); // 星期一
moment().format("MMM Do YY"); // 3月 14日 22
moment().format('YYYY [escaped] YYYY'); // 2022 escaped 2022
moment().format(); // 2022-03-14T15:23:46+08:00
相對時間
moment("20111031", "YYYYMMDD").fromNow(); // 10 年前
moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
moment().startOf('day').fromNow(); // 15 小時前
moment().endOf('day').fromNow(); // 9 小時內
moment().startOf('hour').fromNow(); // 24 分鍾前
日歷時間
moment().subtract(10, 'days').calendar(); // 2022/03/04 moment().subtract(6, 'days').calendar(); // 上星期二15:23 moment().subtract(3, 'days').calendar(); // 上星期五15:23 moment().subtract(1, 'days').calendar(); // 昨天15:23 moment().calendar(); // 今天15:23 moment().add(1, 'days').calendar(); // 明天15:23 moment().add(3, 'days').calendar(); // 下星期四15:23 moment().add(10, 'days').calendar(); // 2022/03/24
多語言支持
moment.locale(); // zh-cn moment().format('LT'); // 15:23 moment().format('LTS'); // 15:23:46 moment().format('L'); // 2022/03/14 moment().format('l'); // 2022/3/14 moment().format('LL'); // 2022年3月14日 moment().format('ll'); // 2022年3月14日 moment().format('LLL'); // 2022年3月14日下午3點23分 moment().format('lll'); // 2022年3月14日 15:23 moment().format('LLLL'); // 2022年3月14日星期一下午3點23分 moment().format('llll'); // 2022年3月14日星期一 15:23
雖然moment 的功能強大但是體積也最大，moment.min.js 的體積為51K，dayjs.min.js 體積為7K，dayjs 和 moment 的接口幾乎完全一致，相互切換的學習成本極低，如果新項目使用，可以優先考慮dayjs。dayjs的API和moment幾乎一模一樣，所以如果想要替換到現有的momentjs代碼，直接替換為dayjs即可，調用語句絕大部分情況下可以一字不改。