JavaScript日期处理库Day.js使用文档

 更新时间:2025年12月15日 08:20:33   作者:懒羊羊我小弟  
Day.js是一个轻量的处理时间和日期的JavaScript库,和Moment.js的API设计保持完全一样,这篇文章主要介绍了JavaScript日期处理库Day.js使用文档的相关资料,需要的朋友可以参考下

一、什么是 Day.js?

Day.js 是一个轻量级的 JavaScript 日期处理库,API 设计与 Moment.js 高度一致,但体积仅 2KB 左右(远小于 Moment.js 的 24KB+),且支持 tree-shaking,非常适合对体积敏感的项目。它专注于日期解析、格式化、计算等核心功能,同时保持了简洁的 API 和良好的兼容性。

二、安装与引入

1. 安装

通过 npm 或 yarn 安装:

npm install dayjs --save
# 或
yarn add dayjs

2. 引入

在项目中直接引入即可使用核心功能:

import dayjs from 'dayjs'

三、核心概念:Day.js 对象

Day.js 的所有操作都围绕「Day.js 对象」进行。该对象是不可变的(immutable),即任何修改操作(如加减时间、设置日期)都会返回一个新的 Day.js 对象,原对象不会被改变。

创建 Day.js 对象的常用方式:

// 1. 当前时间
const now = dayjs()

// 2. 从字符串创建(支持 ISO 格式、YYYY-MM-DD 等)
const date1 = dayjs('2023-10-01')
const date2 = dayjs('2023-10-01T12:30:00')

// 3. 从时间戳创建(毫秒)
const date3 = dayjs(1696108800000) // 对应 2023-10-01 00:00:00

// 4. 从 Date 对象创建
const date4 = dayjs(new Date(2023, 9, 1)) // 注意:Month 是 0 基(9 对应 10月)

// 5. 复制现有 Day.js 对象
const date5 = dayjs(now) // 复制 now 对象

四、常用 API 操作

1. 格式化日期(format)

将 Day.js 对象转为指定格式的字符串,支持多种占位符:

const date = dayjs('2023-10-01 12:30:45')

// 常用格式
date.format('YYYY-MM-DD') // '2023-10-01'
date.format('YYYY年MM月DD日') // '2023年10月01日'
date.format('HH:mm:ss') // '12:30:45'
date.format('YYYY-MM-DD HH:mm:ss') // '2023-10-01 12:30:45'
date.format('ddd') // 'Sun'(星期缩写,依赖本地化插件)
date.format('X') // 1696149045(秒级时间戳)
date.format('x') // 1696149045000(毫秒级时间戳)

常用占位符说明:

  • YYYY:4位年份(如 2023)
  • MM:2位月份(01-12)
  • DD:2位日期(01-31)
  • HH:24小时制小时(00-23)
  • hh:12小时制小时(01-12)
  • mm:分钟(00-59)
  • ss:秒(00-59)
  • X:秒级时间戳
  • x:毫秒级时间戳

2. 解析与验证(isValid)

检查日期是否有效(避免无效日期如 2023-02-30):

dayjs('2023-02-30').isValid() // false(2月没有30日)
dayjs('2023-13-01').isValid() // false(月份超出范围)
dayjs('2023-10-01').isValid() // true

3. 时间计算(加减操作)

通过 addsubtract 对日期进行增减,支持年、月、日等单位:

const now = dayjs('2023-10-01')

// 加 1 年
now.add(1, 'year').format('YYYY-MM-DD') // '2024-10-01'

// 减 1 个月
now.subtract(1, 'month').format('YYYY-MM-DD') // '2023-09-01'

// 加 7 天
now.add(7, 'day').format('YYYY-MM-DD') // '2023-10-08'

// 加 30 分钟
now.add(30, 'minute').format('HH:mm') // 假设原时间为 00:00 → '00:30'

支持的单位: year(年)、month(月)、day(日)、hour(时)、minute(分)、second(秒)、millisecond(毫秒)。

4. 时间比较(diff)

计算两个日期的差值:

const date1 = dayjs('2023-10-01')
const date2 = dayjs('2023-10-08')

// 计算相差的天数
date2.diff(date1, 'day') // 7

// 计算相差的小时数
date2.diff(date1, 'hour') // 168(7×24)

// 不指定单位时,默认返回毫秒数
date2.diff(date1) // 604800000(7×24×60×60×1000)

5. 获取/设置日期部分(get/set)

获取或修改日期的年、月、日等部分:

const date = dayjs('2023-10-01 12:30:45')

// 获取
date.year() // 2023(年份)
date.month() // 9(月份,0 基,10月对应 9)
date.date() // 1(日期)
date.hour() // 12(小时)
date.minute() // 30(分钟)
date.second() // 45(秒)

// 设置(返回新对象)
date.year(2024).format('YYYY') // '2024'
date.month(10).format('MM') // '11'(设置为 10 → 11月)
date.date(15).format('DD') // '15'

6. 其他常用操作

  • 判断是否在另一个日期之前/之后/相同:

    const a = dayjs('2023-10-01')
    const b = dayjs('2023-10-02')
    
    a.isBefore(b) // true(a 在 b 之前)
    a.isAfter(b) // false(a 在 b 之后)
    a.isSame(b, 'day') // false(日期不同)
    a.isSame(dayjs('2023-10-01 12:00'), 'day') // true(同一天)
    
  • 获取起始/结束时间:

    const date = dayjs('2023-10-01 12:30:45')
    
    date.startOf('day').format('HH:mm:ss') // '00:00:00'(当天开始)
    date.endOf('month').format('YYYY-MM-DD') // '2023-10-31'(当月结束)
    
  • 转换为原生 Date 对象:

    const date = dayjs('2023-10-01')
    date.toDate() // 原生 Date 对象:Sun Oct 01 2023 00:00:00 GMT+0800
    

五、插件扩展

Day.js 核心功能简洁,可通过插件扩展额外能力(如本地化、相对时间计算等)。

1. 本地化(Locale)

默认显示英文,需引入对应语言包实现中文显示:

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 引入中文包

dayjs.locale('zh-cn') // 全局设置为中文

dayjs('2023-10-01').format('dddd') // '星期日'
dayjs().format('MMMM') // '十月'

2. 相对时间(RelativeTime)

计算「多久前」「多久后」(需引入插件):

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime) // 扩展插件

dayjs('2023-10-01').fromNow() // 假设当前是 2023-10-08 → '7天前'
dayjs().add(3, 'day').fromNow() // '3天后'

3. 更多插件

  • AdvancedFormat:扩展更多格式化占位符(如 Q 季度)
  • WeekOfYear:计算当年的第几周
  • IsLeapYear:判断是否为闰年

插件使用方式均为:引入插件 → 调用 dayjs.extend(插件) 激活。

六、与 Moment.js 的区别

  1. 体积:Day.js 约 2KB,Moment.js 约 24KB+
  2. 不可变性:Day.js 操作返回新对象(不可变),Moment.js 默认修改原对象(可变)
  3. API 兼容性:Day.js 大部分 API 与 Moment.js 一致,迁移成本低
  4. 插件机制:Day.js 核心功能极简,通过插件按需扩展;Moment.js 内置功能丰富

七、总结

Day.js 以轻量、高效、API 友好为特点,适合需要处理日期时间的前端项目。核心用法包括:

  • 创建 Day.js 对象(dayjs()
  • 格式化(format()
  • 时间计算(add()/subtract()
  • 比较(diff()/isBefore() 等)
  • 通过插件扩展功能(本地化、相对时间等)

更多细节可参考 官方文档

到此这篇关于JavaScript日期处理库Day.js使用文档的文章就介绍到这了,更多相关Day.js使用文档内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通俗易懂讲解Json Web Token (JWT)

    通俗易懂讲解Json Web Token (JWT)

    这篇文章主要介绍了通俗易懂讲解Json Web Token (JWT)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 微信小程序制作扭蛋机代码实例

    微信小程序制作扭蛋机代码实例

    这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript中数组随机排序的实现详解

    JavaScript中数组随机排序的实现详解

    这篇文章主要为大家详细介绍了JavaScript中数组随机排序的实现,主要是利用原地算法和sort/shuffle算法,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-11-11
  • HTML+JS实现猜拳游戏的示例代码

    HTML+JS实现猜拳游戏的示例代码

    这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS编写一个猜拳游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS排序之快速排序详解

    JS排序之快速排序详解

    这篇文章主要为大家详细介绍了JS快速排序的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 浅谈JS之tagNaem和nodeName

    浅谈JS之tagNaem和nodeName

    下面小编就为大家带来一篇浅谈JS之tagNaem和nodeName。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

    JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

    JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用
    2017-07-07
  • JavaScript实现的图片3D展示空间(3DRoom)

    JavaScript实现的图片3D展示空间(3DRoom)

    一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。
    2010-10-10
  • 原生js实现可拖动的登录框效果

    原生js实现可拖动的登录框效果

    本文主要介绍了原生js实现可拖动的登录框效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 一文彻底理解JavaScript原型与原型链

    一文彻底理解JavaScript原型与原型链

    这篇文章主要介绍了一文彻底理解JavaScript原型与原型链,JavaScript中有许多内置对象,如:Object, Math, Date等,文章围绕主题展开主题详情,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08

最新评论