Day.js基础用法超详细举例讲解

印平婉

一、Day.js 简介

Day.js 是一个轻量级的 JavaScript 日期处理库，API 设计与 Moment.js 高度兼容，但体积仅有 2KB 左右。它支持链式调用、不可变数据、插件扩展等特性，非常适合现代前端项目。

二、安装与引入

1. NPM/Yarn 安装

1. npm install dayjs
   
2. # 或
   
3. yarn add dayjs

复制代码

2. CDN 引入

1. <script src="https://unpkg.com/dayjs@1.11.10/dayjs.min.js"></script>

复制代码

三、创建日期对象

Day.js 支持多种方式创建日期对象：

1. import dayjs from 'dayjs';
   
2. 
   
3. // 当前时间
   
4. const now = dayjs();
   
5. 
   
6. // 指定日期字符串（支持多种格式）
   
7. const d1 = dayjs('2024-06-01');
   
8. const d2 = dayjs('2024/06/01 12:30:00');
   
9. 
   
10. // 指定时间戳（毫秒）
    
11. const d3 = dayjs(1717200000000);
    
12. 
    
13. // 通过原生 Date 对象
    
14. const d4 = dayjs(new Date());
    
15. 
    
16. // 通过数组（不推荐，Day.js 不直接支持）

复制代码

注意：

• Day.js 默认解析 ISO 8601 格式，其他格式建议配合 customParseFormat 插件。
  
• 月份从 1 开始，和原生 Date 不同。
  

四、格式化日期

使用

1. .format()

复制代码

方法自定义日期输出：

1. const date = dayjs('2024-06-01 15:30:45');
   
2. console.log(date.format('YYYY-MM-DD HH:mm:ss')); // 2024-06-01 15:30:45
   
3. console.log(date.format('dddd, MMMM D, YYYY'));  // Saturday, June 1, 2024
   
4. console.log(date.format('YYYY年M月D日'));         // 2024年6月1日

复制代码

常用格式化符号：
符号含义示例YYYY年2024MM月（01-12）06M月（1-12）6DD日（01-31）01D日（1-31）1HH小时（00-23）15mm分钟（00-59）30ss秒（00-59）45dddd星期几Saturday
五、解析日期（字符串转日期）

Day.js 默认只支持 ISO 8601 格式和部分常见格式。如果需要解析自定义格式，需引入

1. customParseFormat

复制代码

插件：

1. import customParseFormat from 'dayjs/plugin/customParseFormat';
   
2. dayjs.extend(customParseFormat);
   
3. 
   
4. const d = dayjs('2024年06月01日', 'YYYY年MM月DD日');
   
5. console.log(d.format()); // 2024-06-01T00:00:00+08:00

复制代码

六、日期运算


1. 加法.add()

1. const date = dayjs('2024-06-01');
   
2. console.log(date.add(1, 'day').format());    // 2024-06-02
   
3. console.log(date.add(2, 'month').format());  // 2024-08-01
   
4. console.log(date.add(1, 'year').format());   // 2025-06-01

复制代码

2. 减法.subtract()

1. console.log(date.subtract(7, 'day').format()); // 2024-05-25

复制代码

3. 支持的单位

• 1. year

  复制代码
  /
  1. y

  复制代码
• 1. month

  复制代码
  /
  1. M

  复制代码
• 1. week

  复制代码
  /
  1. w

  复制代码
• 1. day

  复制代码
  /
  1. d

  复制代码
• 1. hour

  复制代码
  /
  1. h

  复制代码
• 1. minute

  复制代码
  /
  1. m

  复制代码
• 1. second

  复制代码
  /
  1. s

  复制代码
• 1. millisecond

  复制代码
  /
  1. ms

  复制代码

七、获取日期信息

1. const date = dayjs('2024-06-01 15:30:45');
   
2. console.log(date.year());    // 2024
   
3. console.log(date.month());   // 5 (注意：0 表示 1 月)
   
4. console.log(date.date());    // 1
   
5. console.log(date.day());     // 6 (0 表示周日)
   
6. console.log(date.hour());    // 15
   
7. console.log(date.minute());  // 30
   
8. console.log(date.second());  // 45

复制代码

八、设置日期信息

1. let date = dayjs('2024-06-01 15:30:45');
   
2. date = date.year(2025);
   
3. date = date.month(0); // 0 表示 1 月
   
4. date = date.date(10);
   
5. date = date.hour(8).minute(0).second(0);
   
6. console.log(date.format('YYYY-MM-DD HH:mm:ss')); // 2025-01-10 08:00:00

复制代码

九、日期比较

1. const d1 = dayjs('2024-06-01');
   
2. const d2 = dayjs('2024-06-10');
   
3. 
   
4. console.log(d1.isBefore(d2)); // true
   
5. console.log(d2.isAfter(d1));  // true
   
6. console.log(d1.isSame('2024-06-01')); // true
   
7. 
   
8. // 支持单位比较
   
9. console.log(d1.isSame(d2, 'month')); // true
   
10. console.log(d1.isSame(d2, 'day'));   // false

复制代码

十、获取时间戳与原生 Date

1. const date = dayjs('2024-06-01 15:30:45');
   
2. console.log(date.valueOf()); // 毫秒时间戳
   
3. console.log(date.unix());    // 秒时间戳
   
4. console.log(date.toDate());  // 转为原生 Date 对象

复制代码

十一、判断有效性与闰年

1. console.log(dayjs('2024-02-29').isValid()); // true
   
2. console.log(dayjs('2023-02-29').isValid()); // false
   
3. 
   
4. // 判断闰年（需引入 isLeapYear 插件）
   
5. import isLeapYear from 'dayjs/plugin/isLeapYear';
   
6. dayjs.extend(isLeapYear);
   
7. 
   
8. console.log(dayjs('2024-01-01').isLeapYear()); // true

复制代码

十二、获取月初、月末、年初、年末

1. console.log(dayjs().startOf('month').format('YYYY-MM-DD')); // 月初
   
2. console.log(dayjs().endOf('month').format('YYYY-MM-DD'));   // 月末
   
3. console.log(dayjs().startOf('year').format('YYYY-MM-DD'));  // 年初
   
4. console.log(dayjs().endOf('year').format('YYYY-MM-DD'));    // 年末

复制代码

十三、国际化（本地化）

Day.js 默认是英文，如需中文等其他语言，需引入 locale：

1. import 'dayjs/locale/zh-cn';
   
2. dayjs.locale('zh-cn');
   
3. 
   
4. console.log(dayjs().format('dddd')); // 星期几（中文）

复制代码

十四、常用插件推荐

Day.js 通过插件机制扩展功能，常用插件有：

• customParseFormat：自定义解析格式
  
• isLeapYear：判断闰年
  
• relativeTime：相对时间（如“3天前”）
  
• duration：时间段处理
  
• advancedFormat：更多格式化符号
  
• weekday/weekOfYear/isoWeek：周相关操作
  

示例：相对时间

1. import relativeTime from 'dayjs/plugin/relativeTime';
   
2. dayjs.extend(relativeTime);
   
3. 
   
4. console.log(dayjs().from(dayjs('2024-05-01'))); // 1 个月前
   
5. console.log(dayjs('2024-05-01').fromNow());     // 1 个月前

复制代码

十五、不可变性与链式调用

Day.js 的所有操作都是不可变的，每次操作都会返回一个新的 Day.js 对象：

1. const d1 = dayjs('2024-06-01');
   
2. const d2 = d1.add(1, 'day');
   
3. console.log(d1.format()); // 2024-06-01
   
4. console.log(d2.format()); // 2024-06-02

复制代码

十六、与 Moment.js 的区别

• 体积更小，性能更高
  
• API 设计高度兼容
  
• 插件机制更灵活
  
• 默认不支持链式操作的副作用（不可变）
  

十七、常见坑与注意事项

• 月份从 0 开始：
  1. date.month()

  复制代码
  返回 0 表示 1 月，和原生 Date 一致。
  
• 解析自定义格式需插件：非 ISO 格式字符串需
  1. customParseFormat

  复制代码
  插件。
  
• 链式调用不可变：每次操作返回新对象，原对象不变。
  
• 本地化需手动引入：如需中文等本地化，需引入对应 locale 文件。
  

总结

到此这篇关于Day.js基础用法的文章就介绍到这了,更多相关Day.js基础用法内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！