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使用文档内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字

    Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字

    在Three.js中,使用CSS3DRenderer和CSS3DSprite可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示,本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • layui table 表格上添加日期控件的两种方法

    layui table 表格上添加日期控件的两种方法

    今天小编就为大家分享一篇layui table 表格上添加日期控件的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • yii form 表单提交之前JS在提交按钮的验证方法

    yii form 表单提交之前JS在提交按钮的验证方法

    很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证。怎么处理呢?接下来通过本文给大家分享yii form 表单提交之前JS在提交按钮的验证方法,需要的的朋友参考下
    2017-03-03
  • UniApp开发H5接入微信登录的全过程

    UniApp开发H5接入微信登录的全过程

    uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于UniApp开发H5接入微信登录的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

    微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

    这篇文章主要介绍了微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖),需要的朋友可以参考下
    2019-09-09
  • JavaScript数据类型转换的注意事项

    JavaScript数据类型转换的注意事项

    JavaScript是一种无类型语言,但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是,如果某个类型的值用于需要其他类型的值的环境中,JavaScript就自动将这个值转换成所需要的类型。
    2016-07-07
  • 如何获取元素的最终background-color

    如何获取元素的最终background-color

    本文主要介绍了如何获取元素的最终background-color的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序获取用户手机号码的详细步骤

    微信小程序获取用户手机号码的详细步骤

    最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,需要的朋友可以参考下
    2022-07-07
  • 详解webpack中的publicpath

    详解webpack中的publicpath

    这篇文章主要介绍了webpack中的publicpath,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 在Javascript中使用DTO的示例详解

    在Javascript中使用DTO的示例详解

    在我们讨论实际实现之前,让我们先介绍一下DTO,它的含义是什么,何时使用以及 javascript/nodejs 项目中对它的真正需求,需要的朋友可以参考下
    2023-12-12

最新评论