Day.js时间插件的安装引用与常用方法大全

news2024/9/28 11:15:48

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：常用组件库与实用工具 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

🌈🌈文章目录

01、简介

02、安装

方式一：通过CDN引入Day.js

方式二：通过npm安装Day.js

03、获取当前时间

1、获取当前时间（dayjs对象）：

2、获取当前时间（原生Date对象）

3、获取当前时间（字符串，年、月、日）

4、获取当前时间（字符串，年、月、日、时、分、秒）

5、获取时间戳（秒）

6、获取时间戳（毫秒）

04、获取&设置年、月、日、时、分、秒、毫秒

05、时间操作

1、添加

2、开始时间

3、结束时间

4、获取两个日期间的时间差

06、格式化

07、附录

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>

以上方法其实足够大家日常使用了，如果想要查看更多内容，给大家推荐官网：

安装 · Day.js

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战