研究 Day.js 及其在 Vue3 和 Vue 框架中的应用详解

前言

在前端开发中，日期和时间处理是一个常见需求。随着技术的发展，我们有了更多高效、灵活的日期库可供选择。Day.js 就是一个轻量级、易于使用的 JavaScript 日期库，其灵感来源于 Moment.js，但体积更小，速度更快。本文将深入探讨 Day.js 在 Vue3 和 Vue 框架中的应用，帮助开发者更高效地处理日期和时间问题。

一、Day.js 概述

1.1 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]

• Day.js中文网：dayjs.fenxianglu.cn/
• 访问 www.jsdelivr.com/package/npm...下载最新版本的 Day.js。
• 访问 github.com/iamkun/dayj... 查看 Day.js 的已发布版本和源代码

1.2 Day.js 的安装与引入

1.2.1 Node 项目安装

在 Vue 项目中使用 Day.js，首先需要安装 day.js 库，我们可以通过以下几种方式来进行安装。

# npm 安装
npm install dayjs

# cnpm 安装
cnpm install dayjs -S

# yarn 安装
yarn add dayjs

# pnpm 安装
pnpm add dayjs

然后在项目代码中引入即可:

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

1.2.2 浏览器安装

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

<script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>

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

1.2.3 Element-plus

Element-plus 组件库默认支持 dayjs 进行日期时间处理，所以可以直接导入使用，如下所示：

import { createApp } from 'vue'
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入dayjs日期插件
import dayjs from "dayjs"
// 直接引入 element-plus 中的 dayjs日期插件
// import { dayjs } from 'element-plus';
import App from './App.vue'

const app = createApp(App)
// 使用element-plus
app.use(ElementPlus)
// 全局使用dayjs
app.config.globalProperties.$dayjs=dayjs
app.mount('#app')

默认情况下，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'

1.3 导入本地化语言和插件

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

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 基本使用

Day.js 提供了丰富的日期和时间处理功能，包括格式化、解析、比较、操作等，以下是一些常用功能。

2.1 获取当前时间

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) 视为无效的输入。

2.2 操作

在实际项目中，有时可能需要一些方法来操作 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')

2.3 日期格式化

当解析和操作完成后，可能需要一些方式来格式化展示 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

2.4 日期比较

简单日期比较

序号	方法	简要说明
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')

2.5 其他

是否是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

三、附录

整合了部分常用方法的示例程序：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day.js常用方法总结</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
  </head>
  <body>
    <script>
      console.log("########## 获取当前时间（返回dayjs对象） ##########");
      console.log(dayjs());
      console.log("########## 获取当前时间（返回原生Date对象） ##########");
      console.log(dayjs().toDate());
      console.log("########## 获取当前时间（年月日时分秒，字符串） ##########");
      console.log(dayjs().format("YYYY-MM-DD HH:mm:ss"));
      console.log("########## 获取当前时间（年月日，字符串） ##########");
      console.log(dayjs().format("YYYY-MM-DD"));
      console.log("########## 获取时间戳 (秒) ##########");
      console.log(dayjs().unix());
      console.log("########## 获取时间戳 (毫秒) ##########");
      console.log(dayjs().valueOf());
      console.log("########## 年 ##########");
      console.log(dayjs().year());
      console.log("########## 月 ##########");
      console.log(dayjs().month());
      console.log("########## 日 ##########");
      console.log(dayjs().date());
      console.log("########## 时 ##########");
      console.log(dayjs().hour());
      console.log("########## 分 ##########");
      console.log(dayjs().minute());
      console.log("########## 秒 ##########");
      console.log(dayjs().second());
      console.log("########## 毫秒 ##########");
      console.log(dayjs().millisecond());
      console.log("########## 在日期的基础上加上7天 ##########");
      console.log(dayjs("2022-11-10").add(7, "day"));
      console.log("########## 获取当天的开始时间，并格式化 ##########");
      console.log(dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss.SSS"));
      console.log("########## 获取当天的结束时间，并格式化 ##########");
      console.log(dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss.SSS"));
      console.log("########## 获取两个日期间的时间差 ##########");
      const date1 = dayjs("2022-11-10");
      const date2 = dayjs("2022-10-10");
      console.log(date1.diff(date2, "day"));
    </script>
  </body>
</html>

四、总结

在 Vue 项目中使用 Day.js 库非常简单，非常适合在 Vue3 和 Vue 框架中处理日期和时间问题。通过本文的介绍，我们了解了 Day.js 的基本使用，当然还可以根据 Day.js 的文档自定义和使用更多的日期处理方法和格式化选项，可以更好地理解和应用 Day.js 库，提升 Vue 项目的日期处理能力。