Day.js基礎(chǔ)用法超詳細(xì)舉例講解
更新時間：2025年07月22日 08:25:09 作者：超級土豆粉
Day.js是一個極簡的JavaScript庫,可以為現(xiàn)代瀏覽器解析、驗證、操作和顯示日期和時間,這篇文章主要介紹了Day.js基礎(chǔ)用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、Day.js 簡介
Day.js 是一個輕量級的 JavaScript 日期處理庫，API 設(shè)計與 Moment.js 高度兼容，但體積僅有 2KB 左右。它支持鏈?zhǔn)秸{(diào)用、不可變數(shù)據(jù)、插件擴展等特性，非常適合現(xiàn)代前端項目。
二、安裝與引入
1. NPM/Yarn 安裝
npm install dayjs # 或 yarn add dayjs
2. CDN 引入
<script src="https://unpkg.com/dayjs@1.11.10/dayjs.min.js"></script>
三、創(chuàng)建日期對象
Day.js 支持多種方式創(chuàng)建日期對象：
import dayjs from 'dayjs';
// 當(dāng)前時間
const now = dayjs();
// 指定日期字符串（支持多種格式）
const d1 = dayjs('2024-06-01');
const d2 = dayjs('2024/06/01 12:30:00');
// 指定時間戳（毫秒）
const d3 = dayjs(1717200000000);
// 通過原生 Date 對象
const d4 = dayjs(new Date());
// 通過數(shù)組（不推薦，Day.js 不直接支持）
注意：
- Day.js 默認(rèn)解析 ISO 8601 格式，其他格式建議配合 customParseFormat 插件。
- 月份從 1 開始，和原生 Date 不同。
四、格式化日期
使用 .format() 方法自定義日期輸出：
const date = dayjs('2024-06-01 15:30:45');
console.log(date.format('YYYY-MM-DD HH:mm:ss')); // 2024-06-01 15:30:45
console.log(date.format('dddd, MMMM D, YYYY')); // Saturday, June 1, 2024
console.log(date.format('YYYY年M月D日')); // 2024年6月1日
常用格式化符號：
| 符號 | 含義 | 示例 |
|---|---|---|
| YYYY | 年 | 2024 |
| MM | 月（01-12） | 06 |
| M | 月（1-12） | 6 |
| DD | 日（01-31） | 01 |
| D | 日（1-31） | 1 |
| HH | 小時（00-23） | 15 |
| mm | 分鐘（00-59） | 30 |
| ss | 秒（00-59） | 45 |
| dddd | 星期幾 | Saturday |
五、解析日期（字符串轉(zhuǎn)日期）
Day.js 默認(rèn)只支持 ISO 8601 格式和部分常見格式。如果需要解析自定義格式，需引入 customParseFormat 插件：
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const d = dayjs('2024年06月01日', 'YYYY年MM月DD日');
console.log(d.format()); // 2024-06-01T00:00:00+08:00
六、日期運算
1. 加法.add()
const date = dayjs('2024-06-01');
console.log(date.add(1, 'day').format()); // 2024-06-02
console.log(date.add(2, 'month').format()); // 2024-08-01
console.log(date.add(1, 'year').format()); // 2025-06-01
2. 減法.subtract()
console.log(date.subtract(7, 'day').format()); // 2024-05-25
3. 支持的單位
year/ymonth/Mweek/wday/dhour/hminute/msecond/smillisecond/ms
七、獲取日期信息
const date = dayjs('2024-06-01 15:30:45');
console.log(date.year()); // 2024
console.log(date.month()); // 5 (注意：0 表示 1 月)
console.log(date.date()); // 1
console.log(date.day()); // 6 (0 表示周日)
console.log(date.hour()); // 15
console.log(date.minute()); // 30
console.log(date.second()); // 45
八、設(shè)置日期信息
let date = dayjs('2024-06-01 15:30:45');
date = date.year(2025);
date = date.month(0); // 0 表示 1 月
date = date.date(10);
date = date.hour(8).minute(0).second(0);
console.log(date.format('YYYY-MM-DD HH:mm:ss')); // 2025-01-10 08:00:00
九、日期比較
const d1 = dayjs('2024-06-01');
const d2 = dayjs('2024-06-10');
console.log(d1.isBefore(d2)); // true
console.log(d2.isAfter(d1)); // true
console.log(d1.isSame('2024-06-01')); // true
// 支持單位比較
console.log(d1.isSame(d2, 'month')); // true
console.log(d1.isSame(d2, 'day')); // false
十、獲取時間戳與原生 Date
const date = dayjs('2024-06-01 15:30:45');
console.log(date.valueOf()); // 毫秒時間戳
console.log(date.unix()); // 秒時間戳
console.log(date.toDate()); // 轉(zhuǎn)為原生 Date 對象
十一、判斷有效性與閏年
console.log(dayjs('2024-02-29').isValid()); // true
console.log(dayjs('2023-02-29').isValid()); // false
// 判斷閏年（需引入 isLeapYear 插件）
import isLeapYear from 'dayjs/plugin/isLeapYear';
dayjs.extend(isLeapYear);
console.log(dayjs('2024-01-01').isLeapYear()); // true
十二、獲取月初、月末、年初、年末
console.log(dayjs().startOf('month').format('YYYY-MM-DD')); // 月初
console.log(dayjs().endOf('month').format('YYYY-MM-DD')); // 月末
console.log(dayjs().startOf('year').format('YYYY-MM-DD')); // 年初
console.log(dayjs().endOf('year').format('YYYY-MM-DD')); // 年末
十三、國際化（本地化）
Day.js 默認(rèn)是英文，如需中文等其他語言，需引入 locale：
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
console.log(dayjs().format('dddd')); // 星期幾（中文）
十四、常用插件推薦
Day.js 通過插件機制擴展功能，常用插件有：
- customParseFormat：自定義解析格式
- isLeapYear：判斷閏年
- relativeTime：相對時間（如“3天前”）
- duration：時間段處理
- advancedFormat：更多格式化符號
- weekday/weekOfYear/isoWeek：周相關(guān)操作
示例：相對時間
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
console.log(dayjs().from(dayjs('2024-05-01'))); // 1 個月前
console.log(dayjs('2024-05-01').fromNow()); // 1 個月前
十五、不可變性與鏈?zhǔn)秸{(diào)用
Day.js 的所有操作都是不可變的，每次操作都會返回一個新的 Day.js 對象：
const d1 = dayjs('2024-06-01');
const d2 = d1.add(1, 'day');
console.log(d1.format()); // 2024-06-01
console.log(d2.format()); // 2024-06-02
十六、與 Moment.js 的區(qū)別
- 體積更小，性能更高
- API 設(shè)計高度兼容
- 插件機制更靈活
- 默認(rèn)不支持鏈?zhǔn)讲僮鞯母弊饔茫ú豢勺儯?/li>
十七、常見坑與注意事項
- 月份從 0 開始：
date.month()返回 0 表示 1 月，和原生 Date 一致。 - 解析自定義格式需插件：非 ISO 格式字符串需
customParseFormat插件。 - 鏈?zhǔn)秸{(diào)用不可變：每次操作返回新對象，原對象不變。
- 本地化需手動引入：如需中文等本地化，需引入對應(yīng) locale 文件。
總結(jié)
到此這篇關(guān)于Day.js基礎(chǔ)用法的文章就介紹到這了,更多相關(guān)Day.js基礎(chǔ)用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼
這篇文章主要介紹了JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼,可實現(xiàn)頁面圖文元素定時滾動的效果,涉及JavaScript時間函數(shù)定時改變頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-11-11
WEB前端開發(fā)框架Bootstrap3 VS Foundation5
WEB前端開發(fā)框架Bootstrap3 VS Foundation5,這篇文章主要介紹了Bootstrap3與Foundation5的五大區(qū)別,感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JS取得絕對路徑的實現(xiàn)代碼,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js如何設(shè)置緩存及獲取設(shè)置的緩存,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序轉(zhuǎn)盤抽獎的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了基于js實現(xiàn)二級下拉聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實際代碼，希望能夠以一個比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要給大家介紹了關(guān)于微信小程序input抖動問題的修復(fù)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Draggable Elements 元素拖拽功能實現(xiàn)代碼
雖說js框架到處都是, 都封裝了很多實用的功能,能快速的讓我們實現(xiàn)如動畫,元素拖拽等功能, 不過由于好奇心的驅(qū)使, 有時想一探究竟, 看看一些功能是如何實現(xiàn)的2011-03-03
這篇文章主要為大家詳細(xì)介紹了微信公眾號支付H5調(diào)用支付,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11