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)文章
這篇文章主要為大家詳細(xì)介紹了js繪制購物車拋物線動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
談?wù)凧avaScript數(shù)組常用方法總結(jié)
本篇文章主要介紹了談?wù)凧avaScript數(shù)組常用方法總結(jié)，在JavaScript中，我們需要時常對數(shù)組進行操作。一起跟隨小編過來看看吧2017-01-01
在JavaScript中，for-in和for-of是兩種不同的循環(huán)結(jié)構(gòu)，本文主要介紹了js中for-in和for-of的區(qū)別，具有一定的參考價值，感興趣的可以了解一下2023-12-12
本文為大家介紹下js如何實現(xiàn)展開閉合效果，具體代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
在動態(tài)頁面中，頁面中包含一些動態(tài)產(chǎn)生的控件，在有些情況下需要判斷動態(tài)生成的控件是否存在。2010-08-08
這篇文章主要為大家詳細(xì)介紹了原生js二級聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
通過獲取瀏覽器語言版本，來相對的加載easyui語言包就是動態(tài)加載JS文件，下面有個不錯的實例，大家可以看看2014-10-10
JavaScript實現(xiàn)JSON合并操作示例【遞歸深度合并】
這篇文章主要介紹了JavaScript實現(xiàn)JSON合并操作,結(jié)合實例形式分析了javascript基于遞歸深度實現(xiàn)json合并操作相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-09-09
Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請求錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結(jié)合實例形式分析了javascript使用setAttribute進行屬性設(shè)置操作的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12