Day.js基礎(chǔ)用法超詳細(xì)舉例講解
更新時(shí)間：2025年07月22日 08:25:09 作者：超級(jí)土豆粉
Day.js是一個(gè)極簡(jiǎn)的JavaScript庫,可以為現(xiàn)代瀏覽器解析、驗(yàn)證、操作和顯示日期和時(shí)間,這篇文章主要介紹了Day.js基礎(chǔ)用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、Day.js 簡(jiǎn)介
Day.js 是一個(gè)輕量級(jí)的 JavaScript 日期處理庫，API 設(shè)計(jì)與 Moment.js 高度兼容，但體積僅有 2KB 左右。它支持鏈?zhǔn)秸{(diào)用、不可變數(shù)據(jù)、插件擴(kuò)展等特性，非常適合現(xiàn)代前端項(xiàng)目。
二、安裝與引入
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)建日期對(duì)象
Day.js 支持多種方式創(chuàng)建日期對(duì)象：
import dayjs from 'dayjs';
// 當(dāng)前時(shí)間
const now = dayjs();
// 指定日期字符串（支持多種格式）
const d1 = dayjs('2024-06-01');
const d2 = dayjs('2024/06/01 12:30:00');
// 指定時(shí)間戳（毫秒）
const d3 = dayjs(1717200000000);
// 通過原生 Date 對(duì)象
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日
常用格式化符號(hào)：
| 符號(hào) | 含義 | 示例 |
|---|---|---|
| YYYY | 年 | 2024 |
| MM | 月（01-12） | 06 |
| M | 月（1-12） | 6 |
| DD | 日（01-31） | 01 |
| D | 日（1-31） | 1 |
| HH | 小時(shí)（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
六、日期運(yùn)算
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
十、獲取時(shí)間戳與原生 Date
const date = dayjs('2024-06-01 15:30:45');
console.log(date.valueOf()); // 毫秒時(shí)間戳
console.log(date.unix()); // 秒時(shí)間戳
console.log(date.toDate()); // 轉(zhuǎn)為原生 Date 對(duì)象
十一、判斷有效性與閏年
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 通過插件機(jī)制擴(kuò)展功能，常用插件有：
- customParseFormat：自定義解析格式
- isLeapYear：判斷閏年
- relativeTime：相對(duì)時(shí)間（如“3天前”）
- duration：時(shí)間段處理
- advancedFormat：更多格式化符號(hào)
- weekday/weekOfYear/isoWeek：周相關(guān)操作
示例：相對(duì)時(shí)間
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
console.log(dayjs().from(dayjs('2024-05-01'))); // 1 個(gè)月前
console.log(dayjs('2024-05-01').fromNow()); // 1 個(gè)月前
十五、不可變性與鏈?zhǔn)秸{(diào)用
Day.js 的所有操作都是不可變的，每次操作都會(huì)返回一個(gè)新的 Day.js 對(duì)象：
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è)計(jì)高度兼容
- 插件機(jī)制更靈活
- 默認(rèn)不支持鏈?zhǔn)讲僮鞯母弊饔茫ú豢勺儯?/li>
十七、常見坑與注意事項(xiàng)
- 月份從 0 開始：
date.month()返回 0 表示 1 月，和原生 Date 一致。 - 解析自定義格式需插件：非 ISO 格式字符串需
customParseFormat插件。 - 鏈?zhǔn)秸{(diào)用不可變：每次操作返回新對(duì)象，原對(duì)象不變。
- 本地化需手動(dòng)引入：如需中文等本地化，需引入對(duì)應(yīng) locale 文件。
總結(jié)
到此這篇關(guān)于Day.js基礎(chǔ)用法的文章就介紹到這了,更多相關(guān)Day.js基礎(chǔ)用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js繪制購物車拋物線動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
談?wù)凧avaScript數(shù)組常用方法總結(jié)
本篇文章主要介紹了談?wù)凧avaScript數(shù)組常用方法總結(jié)，在JavaScript中，我們需要時(shí)常對(duì)數(shù)組進(jìn)行操作。一起跟隨小編過來看看吧2017-01-01
在JavaScript中，for-in和for-of是兩種不同的循環(huán)結(jié)構(gòu)，本文主要介紹了js中for-in和for-of的區(qū)別，具有一定的參考價(jià)值，感興趣的可以了解一下2023-12-12
本文為大家介紹下js如何實(shí)現(xiàn)展開閉合效果，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
在動(dòng)態(tài)頁面中，頁面中包含一些動(dòng)態(tài)產(chǎn)生的控件，在有些情況下需要判斷動(dòng)態(tài)生成的控件是否存在。2010-08-08
這篇文章主要為大家詳細(xì)介紹了原生js二級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS獲取瀏覽器語言動(dòng)態(tài)加載JS文件示例代碼
通過獲取瀏覽器語言版本，來相對(duì)的加載easyui語言包就是動(dòng)態(tài)加載JS文件，下面有個(gè)不錯(cuò)的實(shí)例，大家可以看看2014-10-10
JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)JSON合并操作,結(jié)合實(shí)例形式分析了javascript基于遞歸深度實(shí)現(xiàn)json合并操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-09-09
Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結(jié)合實(shí)例形式分析了javascript使用setAttribute進(jìn)行屬性設(shè)置操作的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12