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

server/2025/1/23 9:54:08/

image

前言

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

一、Day.js 概述

1.1 Day.js 是什么

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

image

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

单位缩写描述
dateD日期 [1,31]
dayd星期[0,6] (星期日0，星期六6)
monthM月份 0,11
yeary年 [1,31]
hourh小时 [0,23]
minutem分钟 [0,59]
seconds秒 [0,59]
millisecondms毫秒 [0,999]
  • Day.js中文网：https://dayjs.fenxianglu.cn/
  • 访问 https://www.jsdelivr.com/package/npm/dayjs下载最新版本的 Day.js。
  • 访问 https://github.com/iamkun/dayjs/releases 查看 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

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

javascript">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 进行日期时间处理，所以可以直接导入使用，如下所示：

javascript">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 只提供核心代码，没有安装插件，我们可以根据需要加载多个插件，如下所示：

javascript">// 扩展插件
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 项目中导入并使用

javascript">import * as dayjs from 'dayjs'
dayjs().format()

  如果项目的 tsconfig.json 包含以下配置，就必须使用 import dayjs from 'dayjs' 的 default import 模式

{"compilerOptions": {"esModuleInterop": true,"allowSyntheticDefaultImports": true,}
}

  如果项目中没有上述配置，default import 将无法正常工作，还需要使用以下方式

javascript">import * as dayjs from 'dayjs'

1.3 导入本地化语言和插件

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

javascript">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())

javascript">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 对象的方法，如下表所示：

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

  从 Day.js 对象中获取相应信息的 getter，例如：

javascript">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。

加减指定的时间

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

时间的开始、结束

序号方法简要说明
1startOf返回当前时间的开始时间的 Day.js() 对象，如月份的第一天。
2endOf返回当前时间的结束时间的 Day.js() 对象，如月份的最后一天。
javascript">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 对象。

基本格式化

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

javascript">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

  支持的常用格式化占位符列表：

标识示例描述
YY18年，两位数
YYYY2018年，四位数
M1-12月，从1开始
MM01-12月，两位数
MMMJan-Dec月，英文缩写
MMMMJanuary-December月，英文全称
D1-31日
DD01-31日，两位数
d0-6一周中的一天，星期天是 0
ddSu-Sa最简写的星期几
dddSun-Sat简写的星期几
ddddSunday-Saturday星期几，英文全称
H0-23小时
HH00-23小时，两位数
h1-12小时, 12 小时制
hh01-12小时, 12 小时制, 两位数
m0-59分钟
mm00-59分钟，两位数
s0-59秒
ss00-59秒，两位数
AAM / PM上/下午，大写
aam / pm上/下午，小写

相对时间

方法简要说明
fromNow返回现在到当前实例的相对时间。
from返回指定时间到当前实例的相对时间。
toNow返回当前实例到现在的相对时间。
to返回当前实例到指定时间的相对时间。

【注意】此功能依赖 RelativeTime 插件

javascript">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);

两个日期之间的差值

序号方法简要说明
1diff返回指定单位下两个日期时间之间的差异，默认单位是毫秒。
javascript">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 作为第三个参数传入。例如：

javascript">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 日期比较

简单日期比较

序号方法简要说明
1isBefore检查一个 Day.js对象是否在另一个 Day.js 对象时间之前
2isAfter检查一个 Day.js对象是否在另一个 Day.js 对象时间之后。
3isSame检查一个 Day.js对象是否与另一个 Day.js 对象时间相同。
javascript">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 插件。

javascript">import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isSameOrBefore)dayjs().isSameOrBefore(dayjs('2011-01-01')) // 默认毫秒

  如果想使用除了毫秒以外的单位进行比较，则将单位作为第二个参数传入。例如：

javascript">dayjs().isSameOrBefore('2011-01-01', 'year')

是否相同或之后

  这表示 Day.js 对象是否和另一个提供的日期时间相同或在其之后。注意，此功能依赖 IsSameOrAfter 插件。

javascript">import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
dayjs.extend(isSameOrAfter)dayjs().isSameOrAfter(dayjs('2011-01-01')) // 默认毫秒

  如果想使用除了毫秒以外的单位进行比较，则将单位作为第二个参数传入。例如：

javascript">dayjs().isSameOrAfter('2011-01-01', 'year')

检查日期是否在某个范围内

序号方法简要说明
1isBetween表示 Day.js 对象是否在其他两个的日期时间之间，注意，此功能依赖 IsBetween 插件。
javascript">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，因为目标日期在范围内

  如果想使用除了毫秒以外的单位进行比较，则将单位作为第三个参数传入。例如：

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

2.5 其他

是否是Day.js

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

javascript">dayjs.isDayjs(dayjs()) // true
dayjs.isDayjs(new Date()) // false

是否闰年

  查询 Day.js 对象的年份是否是闰年。注意，此功能依赖于 IsLeapYear 插件。例如：

javascript">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>javascript">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 项目的日期处理能力。
image


http://www.ppmy.cn/server/160700.html

相关文章

2025.1.19机器学习笔记：PINN文献精读

2025.1.19机器学习笔记：PINN文献精读

第三十周周报 一、文献阅读题目信息摘要Abstract创新点物理背景网络框架实验实验一&#xff1a;直道稳定流条件实验二&#xff1a;环状网络中的非稳定流条件 结论缺点及展望 二、代码实践总结 一、文献阅读 题目信息 题目&#xff1a;《Enhanced physics-informed neural net…
阅读更多...
微服务与docker

微服务与docker

准备工作 在课前资料中给大家提供了黑马商城项目的资料，我们需要先导入这个单体项目。不过需要注意的是，本篇及后续的微服务学习都是基于Centos7系统下的Docker部署，因此你必须做好一些准备： Centos7的环境及一个好用的SSH客户端装好Docker会使用Docker如果是学习过上面Doc…
阅读更多...
[Qt] QPainter | Qpen | QPixmap

[Qt] QPainter | Qpen | QPixmap

目录 绘图 1、基本概念 2、绘制各种形状 &#xff08;1&#xff09;绘制线段 &#xff08;2&#xff09;绘制矩形 &#xff08;3&#xff09;绘制圆形 &#xff08;4&#xff09;绘制文本 &#xff08;5&#xff09;设置画笔 【画笔的使用】 &#xff08;6&#xff0…
阅读更多...
leetcode 300. 最长递增子序列

leetcode 300. 最长递增子序列

题目如下 数据范围 这道题用暴力的角度来做的话时间复杂度是O(2^n)结合数据范围来看显然会超时。 那么我们可以考虑动态规划&#xff1a; 令dp[i]是以nums[i]为结尾的递增子序列的长度那么dp[i] max(dp[j] 1,dp[i])其中0 < j < i当然要满足nums[i] > nums[j]。 (…
阅读更多...
【算法】贪心

【算法】贪心

贪心 1.简单贪心1.货仓选址2.最大子段和3.纪念品分组4.排座椅5.矩阵消除游戏 2.推公式1.拼数2.Protecting the Flowers3.奶牛玩杂技 3.哈夫曼编码1.【模板】哈夫曼编码2.字符编码3.合并果子 4.区间问题1.线段覆盖2.Radar Installation3.Sunscreen4.Stall Reservations 1.简单贪…
阅读更多...
GDB相比IDE有什么优点

GDB相比IDE有什么优点

GDB（GNU Debugger）相比于集成开发环境（IDE）具有一些独特的优点，主要体现在其灵活性、可定制性和低级控制能力。具体来说，GDB有以下几个优点： 1. 轻量级且无依赖 GDB是一个命令行工具，不依赖于任何复杂的图形界面或大型库，这使得它非常适合在资源受限的环境中使用，比…
阅读更多...
事件委托，其他事件，电梯导航，固定导航

事件委托，其他事件，电梯导航，固定导航

事件委托改造 tab 栏切换 tab栏切换&#xff1a;前边的案例是 for 循环遍历每个 li 注册鼠标进入事件&#xff0c;给添加了 active类的 a 删除掉 active类&#xff0c;然后给点击的 a 添加上 active类&#xff08;也就是将已经有的 active 类删除掉&#xff0c;为当前点击到的…
阅读更多...
技术洞察：C++在后端开发中的前沿趋势与社会影响

技术洞察：C++在后端开发中的前沿趋势与社会影响

文章目录 引言C在后端开发中的前沿趋势1. 高性能计算的需求2. 微服务架构的兴起3. 跨平台开发的便利性 跨领域技术融合与创新实践1. C与人工智能的结合2. C与区块链技术的融合 C对社会与人文的影响1. 提升生产力与创新能力2. 促进技术教育与人才培养3. 技术与人文的深度融合 结…
阅读更多...
最新文章

Copyright @ 2022~2023