day.js

Day.js 是一个小巧且快速的 JavaScript 日期库,提供了与 Moment.js 类似的 API,但体积更小,加载速度更快。Day.js 支持多种语言,易于定制,非常适合在前端开发中处理日期和时间问题。

各个传入的单位对大小写不敏感,支持缩写和复数。请注意,缩写是区分大小写的。支持的单位列表如下所示:

单位 缩写 描述 date D 日期 [1,31] day d 星期[0,6] (星期日0,星期六6) month M 月份 0,11 year y 年 [1,31] hour h 小时 [0,23] minute m 分钟 [0,59] second s 秒 [0,59] millisecond ms 毫秒 [0,999]

npm 安装

npm install dayjs

在项目代码中引入即可:

var dayjs = require('dayjs') // ES 2015 import dayjs from 'dayjs'

若是想在浏览器使用,可以引入相关依赖,这里采用 CDN 方式,如下所示:

  注意:Day.js可以通过CDN提供商,如:cdnjs.com、unpkg、jsdelivr和bootcdn.cn等引入

默认情况下,Day.js 只提供核心代码,没有安装插件,我们可以根据需要加载多个插件,如下所示:

// 扩展插件 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore' import isSameOrAfter from 'dayjs/plugin/isSameOrAfter' dayjs.extend(isSameOrBefore) dayjs.extend(isSameOrAfter) Typescript 在 NPM 包中已经包含 Day.js 的 TypeScript 类型定义文件,可以直接通过 NPM 安装:

npm install dayjs --save 然后在 TypeScript 项目中导入并使用

import * as dayjs from 'dayjs' dayjs().format() 如果项目的 tsconfig.json 包含以下配置,就必须使用 import dayjs from 'dayjs' 的 default import 模式

{ "compilerOptions": { "esModuleInterop": true, "allowSyntheticDefaultImports": true, } } 如果项目中没有上述配置,default import 将无法正常工作,还需要使用以下方式

import * as dayjs from 'dayjs'

导入本地化语言和插件 在使用本地化语言和插件,首先需要导入它们。

import * as dayjs from 'dayjs' // 导入插件 import * as isLeapYear from 'dayjs/plugin/isLeapYear' // 导入本地化语言 import 'dayjs/locale/zh-cn' // 使用插件 dayjs.extend(isLeapYear) // 使用本地化语言 dayjs.locale('zh-cn')

获取当前时间 Day.js对 Date 对象进行了封装,只需要调用 Dayjs() 即可。Day.js 对象是不可变的,也就是说,以某种方式改变 Day.js 对象的所有API操作都将返回它的一个新实例。Day.js 对象,即当前时间,其等价于 dayjs(Date.now())、dayjs(new Date())

var now = dayjs() 上述方法等同于 dayjs(new Date()) 的调用,当没有传入参数时,参数默认值是 undefined,所以调用 dayjs(undefined) 就相当于调用 dayjs()。注意,Day.js 将 dayjs(null) 视为无效的输入。

操作 在实际项目中,有时可能需要一些方法来操作 Day.js 对象。把 dayjs() 对象当成一个中转站,往后所有的关于日期的计算都先转成 dayjs() 对象,再进行加减等运行。

取值/赋值 在设计上 Day.js 的 getter 和 setter 使用了相同的 API,也就是说,不传参数调用方法即为 getter,调用并传入参数为 setter。这些 API 调用了对应原生 Date 对象的方法,如下表所示:

序号 方法 简要说明 1 millisecond 获取或设置毫秒。接受0到999的数值,如果超出这个范围,它会进位到秒。 2 second 获取或设置秒。接受0到59的数值,如果超出这个范围,它会进位到分钟。 3 minute 获取或设置分钟。接受0到59的数值,如果超出这个范围,它会进位到小时。 4 hour 获取或设置小时。接受0到23的数值,如果超出这个范围,它会进位到天数。 5 date 获取或设置月份里的日期。接受1到31的数值,如果超出这个范围,它会进位到月份。 6 day 获取或设置星期几。接受number 从0(星期天)到6(星期六),如果超出这个范围,它会进位到其他周。 7 weekday 根据本地化配置获取或设置星期几,此功能依赖 Weekday 插件。 如果本地化配置了星期天为一周的第一天, dayjs().weekday(0) 将返回星期天。 如果星期一是一周的第一天, dayjs().weekday(0) 将返回星期一。 8 dayOfYear 获取或设置年份里第几天,此功能依赖 DayOfYear 插件。 接受1到366的数值,如果超出这个范围,它会进位到下一年。 9 week 获取或设置该年的第几周,此功能依赖 WeekOfYear 插件。 10 month 获取或设置月份。月份是从 0 开始计算的,即 1 月是 0。 接受 0 到11的数值。 如果超出这个范围,它会进位到年份。 11 quarter 获取或设置季度。此功能依赖 QuarterOfYear 插件 12 year 获取或设置年份。 13 weekYear 获取基于当前语言配置的按周计算的年份,此功能依赖 WeekYear 插件。 14 isoWeeksInYear 获取当前年份的周数,此功能依赖 IsoWeeksInYear 插件 // 年份 dayjs().year() // 月份 dayjs().month() // 日 dayjs().date() // 时 dayjs().hour() // 分 dayjs().minute() // 秒 dayjs().second() // 毫秒 dayjs().millisecond() 从 Day.js 对象中获取相应信息的 getter,例如:

console.log("dayjs().get('year'):", dayjs().get("year")); //年 [1,366] console.log("dayjs().get('month'):", dayjs().get("month")); //月 [0,11] 0表示1月 console.log("dayjs().get('date'):", dayjs().get("date")); //日[1,31] console.log("dayjs().get('hour'):", dayjs().get("hour")); //时 [0,23] console.log("dayjs().get('minute'):", dayjs().get("minute")); //分 [0,59] console.log("dayjs().get('second'):", dayjs().get("second")); //秒 [0,59] console.log("dayjs().get('millisecond'):", dayjs().get("millisecond")); //毫秒[0,999] console.log("dayjs().get('day'):", dayjs().get("day")); //星期几 [0,6]。0(星期日)到6(星期六) 这里需要着重注意的是,获取月份时返回的月份值比实际月份小1,即当前月份为11月时,month() 返回的值为10。

加减指定的时间 序号 方法 简要说明 1 add 增加时间并返回一个新的 Day.js 对象 2 subtract 减少时间并返回一个新的 Day.js 对象 const addedTime = dayjs().add(7, 'days'); console.log(addedTime.format('YYYY-MM-DD')); // 输出添加 7 天后的日期,如:2024-05-07

const subtractTime = dayjs().subtract(7, 'year') console.log(subtractTime.format('YYYY-MM-DD')); // 输出添加 7 天前的日期,如:2024-05-01 时间的开始、结束 序号 方法 简要说明 1 startOf 返回当前时间的开始时间的 Day.js() 对象,如月份的第一天。 2 endOf 返回当前时间的结束时间的 Day.js() 对象,如月份的最后一天。 dayjs().startOf('year'); dayjs().startOf('month') // 获取当天的开始时间,返回当天的0点0分0秒 dayjs().endOf('day')

dayjs().endOf('month'); dayjs().endOf('year') // 获取当天的结束时间,返回当天的23点59分59秒999毫秒 dayjs().endOf('day')

日期格式化 当解析和操作完成后,可能需要一些方式来格式化展示 Day.js 对象。

基本格式化 根据传入的占位符返回格式化后的日期。例如:

import dayjs from "dayjs";

const currentDate = dayjs();

console.log(currentDate.format());// 默认返回的是 ISO8601 格式字符串 console.log(currentDate.format('YYYY-MM-DD')); // 输出当前日期,如:2022-11-09 console.log(currentDate.format('HH:mm:ss')); // 输出当前时间,如:14:30:00 console.log(currentDate.format('YYYY-MM-DD HH:mm:ss')); // 输出当前日期,如:2022-11-09 14:30:00 console.log(dayjs('2022-11-09').format('YYYY-MM-DD')); // 输出指定日期,如:2022-11-09 支持的常用格式化占位符列表:

标识 示例 描述 YY 18 年,两位数 YYYY 2018 年,四位数 M 1-12 月,从1开始 MM 01-12 月,两位数 MMM Jan-Dec 月,英文缩写 MMMM January-December 月,英文全称 D 1-31 日 DD 01-31 日,两位数 d 0-6 一周中的一天,星期天是 0 dd Su-Sa 最简写的星期几 ddd Sun-Sat 简写的星期几 dddd Sunday-Saturday 星期几,英文全称 H 0-23 小时 HH 00-23 小时,两位数 h 1-12 小时, 12 小时制 hh 01-12 小时, 12 小时制, 两位数 m 0-59 分钟 mm 00-59 分钟,两位数 s 0-59 秒 ss 00-59 秒,两位数 A AM / PM 上/下午,大写 a am / pm 上/下午,小写 相对时间 方法 简要说明 fromNow 返回现在到当前实例的相对时间。 from 返回指定时间到当前实例的相对时间。 toNow 返回当前实例到现在的相对时间。 to 返回当前实例到指定时间的相对时间。 【注意】此功能依赖 RelativeTime 插件

import relativeTime from "dayjs/plugin/relativeTime"; dayjs.extend(relativeTime);

// 相对当前时间(前) dayjs('1999-01-01').fromNow();

// 相对指定时间(前) var a = dayjs('2000-01-01'); dayjs('1999-01-01').from(a);

// 相对当前时间(后) dayjs('1999-01-01').toNow();

// 相对指定时间(后) var b = dayjs('2000-01-01'); dayjs('1999-01-01').to(a);

两个日期之间的差值 序号 方法 简要说明 1 diff 返回指定单位下两个日期时间之间的差异,默认单位是毫秒。 const date1 = dayjs('2019-01-25') const date2 = dayjs('2018-06-05')

console.log("time1:", time1); console.log("time2:", time2); console.log("time1和time2相差多少hour:", time2.diff(time1, "hour")); console.log("time1和time2相差多少minute:", time2.diff(time1, "minute")); console.log("time1和time2相差多少second:", time2.diff(time1, "second")); 默认情况下 diff 会将结果进位成整数,如果要得到一个浮点数,将 true 作为第三个参数传入。例如:

const date1 = dayjs('2019-01-25') date1.diff('2018-06-05', 'month', true)

日期转dayjs对象 简要说明 valueOf() 返回当前实例的 UNIX 时间戳,13位数字,毫秒 unix() 返回当前实例的 UNIX 时间戳,10位数字,秒。 daysInMonth() 获取月天数 toDate() 转Date toArray() 返回一个包含各个时间信息的 Array,此功能依赖 ToArray 插件 toJSON() 序列化为 ISO 8601 格式的字符串。 toISOString() 返回一个 ISO 8601 格式的字符串。 toObject() 返回包含时间信息的 Object,此功能依赖 ToObject 插件 toString() 返回包含时间信息的 string

日期比较 简单日期比较 序号 方法 简要说明 1 isBefore 检查一个 Day.js对象是否在另一个 Day.js 对象时间之前 2 isAfter 检查一个 Day.js对象是否在另一个 Day.js 对象时间之后。 3 isSame 检查一个 Day.js对象是否与另一个 Day.js 对象时间相同。 console.log("当前时间:",dayjs().format("YYYY-MM-DD")) console.1og("当前时间<2022-01-01 吗):",dayjs().isBefore(dayjs('2022-01-01'))) console.log("当前时间>2022-01-01 吗):",dayjs().isAfter(dayjs('2022-01-01') console.1og("当前时间=2022-01-01 吗):",dayjs().isSame(dayjs('2022-01-01'))) 是否相同或之前 这表示 Day.js 对象是否和另一个提供的日期时间相同或在其之前。注意,此功能依赖 IsSameOrBefore 插件。

import isBetween from "dayjs/plugin/isBetween"; dayjs.extend(isSameOrBefore)

dayjs().isSameOrBefore(dayjs('2011-01-01')) // 默认毫秒 如果想使用除了毫秒以外的单位进行比较,则将单位作为第二个参数传入。例如:

dayjs().isSameOrBefore('2011-01-01', 'year') 是否相同或之后 这表示 Day.js 对象是否和另一个提供的日期时间相同或在其之后。注意,此功能依赖 IsSameOrAfter 插件。

import isSameOrAfter from "dayjs/plugin/isSameOrAfter"; dayjs.extend(isSameOrAfter)

dayjs().isSameOrAfter(dayjs('2011-01-01')) // 默认毫秒 如果想使用除了毫秒以外的单位进行比较,则将单位作为第二个参数传入。例如:

dayjs().isSameOrAfter('2011-01-01', 'year') 检查日期是否在某个范围内 序号 方法 简要说明 1 isBetween 表示 Day.js 对象是否在其他两个的日期时间之间,注意,此功能依赖 IsBetween 插件。 import isBetween from "dayjs/plugin/isBetween"; dayjs.extend(isBetween)

const targetDate = dayjs('2024-04-30'); const startDate = dayjs('2024-04-01'); const endDate = dayjs('2024-05-01');

const isWithinRange = targetDate.isBetween(startDate, endDate); console.log(isWithinRange); // 输出 true,因为目标日期在范围内 如果想使用除了毫秒以外的单位进行比较,则将单位作为第三个参数传入。例如:

dayjs().isBetween('2010-10-19', '2010-10-25', 'year')

是否是Day.js 这表示一个变量是否为 Day.js 对象。例如:

dayjs.isDayjs(dayjs()) // true dayjs.isDayjs(new Date()) // false 是否闰年 查询 Day.js 对象的年份是否是闰年。注意,此功能依赖于 IsLeapYear 插件。例如:

import isLeapYear from "dayjs/plugin/isLeapYear"; dayjs.extend(isLeapYear)

dayjs('2000-01-01').isLeapYear() // true

评论