01、简介
Day.js是一个轻量的处理时间和日期的 JavaScript 库。 官方文档地址:https://day.js.org/docs/zh-CN/installation/installation
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、获取&设置年、月、日、时、分、秒、毫秒
编写示例时的日期是2022年11月10日10点。
// 年份
dayjs().year() // 输出结果:2022
// 月份
dayjs().month() // 输出结果:10
// 日
dayjs().date() // 输出结果:10
// 时
dayjs().hour() // 输出结果:10
// 分
dayjs().minute() // 输出结果:10
// 秒
dayjs().second() // 输出结果:15
// 毫秒
dayjs().millisecond() // 输出结果:952
说明: 1、以上年、月、日、时、分、秒的方法,没有参数时是获取值,有参数时是设置值。
// 设置年份
dayjs().year(2022)
// 设置月份
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')
支持的时间单位如下:
单位 | 简写 | 说明 |
day | d | 天 |
week | w | 周 |
month | M | 月 |
quarter | Q | 季度 |
year | y | 年 |
hour | h | 小时 |
minute | m | 分钟 |
second | s | 秒 |
millisecond | ms | 毫秒 |
2、开始时间 获取当天的开始时间,返回当天的0点0分0秒:
dayjs().startOf('day')
支持的时间单位如下:
单位 | 缩写 | 说明 |
year | y | January 1st, 00:00 this year |
month | M | the first day of this month, 00:00 |
week | w | the first day of this week, 00:00 (locale aware) |
date | D | 00:00 today |
day | d | 00:00 today |
hour | h | now, but with 0 mins, 0 secs, and 0 ms |
minute | m | now, but with 0 seconds and 0 milliseconds |
second | s | now, but with 0 milliseconds |
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')
以下是常用的时间格式单位:
格式 | 输出 | 描述 |
YY | 19 | 两位数年份 |
YYYY | 2019 | 四位数年份 |
M | 1~12 | 月份,从1开始 |
MM | 01~12 | 月份,两位数 |
D | 1~31 | 月份里的一天 |
DD | 01~31 | 月份里的一天,两位数 |
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 | 秒,两位数 |
SSS | 000~999 | 毫秒,三位数 |
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>