Day.js时间插件的安装引用与常用方法大全
🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~
💟 作 者：码喽的自我修养🥰
📝 专 栏：常用组件库与实用工具 🎉🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕
🌈🌈文章目录
01、简介
Day.js 是一个轻量级，易于使用的 JavaScript 日期库，提供了强大的日期和时间处理功能。它具有简洁的 API，支持链式操作和不可变性。Day.js 支持国际化显示和各种格式的日期和时间的解析和格式化。它还提供了丰富的插件系统，可以轻松扩展功能。无论是在 Web 还是 Node.js 环境下，Day.js 都是一个不错的选择
02、安装
方式一：通过CDN引入Day.js
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
方式二：通过npm安装Day.js
这里以Vue项目为例。
在Vue项目中引入Day.js的步骤如下：
第一步：通过npm命令安装Day.js。
$ npm install dayjs
第二步：在main.js文件中配置Day.js。
import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;
经过如上两步，就可以直接通过this.dayjs()使用Day.js了。比如获取时间戳（秒）：
const time = this.dayjs().unix();
03、获取当前时间
1、获取当前时间（dayjs对象）：
dayjs()
当没有参数时，会返回一个 dayjs 实例对象，且为当前日期和时间。
输出结果：
2、获取当前时间（原生Date对象）
dayjs().toDate()输出结果：
3、获取当前时间（字符串，年、月、日）
dayjs().format('YYYY-MM-DD')输出结果：
4、获取当前时间（字符串，年、月、日、时、分、秒）
dayjs().format('YYYY-MM-DD HH:mm:ss')输出结果：
5、获取时间戳（秒）
dayjs().unix()
输出结果：
6、获取时间戳（毫秒）
dayjs().valueOf()输出结果：
04、获取&设置年、月、日、时、分、秒、毫秒
编写示例时的日期是2024年11月10日10点。
// 年份
dayjs().year() // 输出结果：2024
// 月份
dayjs().month() // 输出结果：10
// 日
dayjs().date() // 输出结果：10
// 时
dayjs().hour() // 输出结果：10
// 分
dayjs().minute() // 输出结果：10
// 秒
dayjs().second() // 输出结果：15
// 毫秒
dayjs().millisecond() // 输出结果：952
说明：
1、以上年、月、日、时、分、秒的方法，没有参数时是获取值，有参数时是设置值。
// 设置年份
dayjs().year(2024)
// 设置月份
dayjs().month(10)
// 设置日
dayjs().date(10)
// 设置时
dayjs().hour(10)
// 设置分
dayjs().minute(10)
// 设置秒
dayjs().second(15)
// 设置毫秒
dayjs().millisecond(952)
2、获取月份时返回的月份值比实际月份小1，即当前月份为11月时，month()返回的值为10。
05、时间操作
1、添加
Day.js获取一段时间后的时间，时间单位支持年、月、日、时、分、秒、毫秒、周、季度，返回的是 dayjs 对象。例如获取的是7天后的时间：
dayjs().add(7, 'day')支持的时间单位如下：
2、开始时间
获取当天的开始时间，返回当天的0点0分0秒：
dayjs().startOf('day')支持的时间单位如下：
3、结束时间
获取当天的结束时间，返回当天的23点59分59秒999毫秒：
dayjs().endOf('day')支持的时间单位同获取开始时间。
4、获取两个日期间的时间差
const date1 = dayjs("2022-11-10")
const date2 = dayjs("2022-10-10")
date1.diff(date2, "day") // 输出结果：31
06、格式化
dayjs.format('YYYY-MM-DD HH:mm:ss')以下是常用的时间格式单位：
07、附录
整合了部分常用方法的示例程序：
<!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>
以上方法其实足够大家日常使用了，如果想要查看更多内容，给大家推荐官网：
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕
更多专栏订阅推荐：
✈️ HTML5与CSS3
🖼️ JavaScript基础
⭐️ uniapp与微信小程序
✍️ GIS地图与大数据可视化
原文地址：https://blog.csdn.net/2301_78542842/article/details/142344645
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！