js日期处理库--dayjs

js中处理日期是一件比较麻烦的事情,这里推荐使用day.js库来处理,文档:Day.js中文网

引入库

如果没有引入过dayjs,需要先执行npm install,然后import就能使用了

复制代码
npm install dayjs
javascript 复制代码
import dayjs from 'dayjs'

console.log(dayjs().format())

如果使用的是element plus,可以直接使用

javascript 复制代码
import { dayjs } from 'element-plus'

console.log(dayjs().format())

解析

可以看到dayjs相当强大,各种格式的都能解析

javascript 复制代码
let now = dayjs() //返回当前时间
console.log(now.format())
let date = dayjs('2018-04-04T20:00:00.000Z') // 解析ISO 8601格式的字符串
console.log(date.format())
date = dayjs("2024-08-09") //解析YYYY-MM-DD格式的
console.log(date.format())
date = dayjs("2024-08-09 10:04:05") //解析YYYY-MM-DD HH:mm:ss格式的
console.log(date.format())

显示

使用format函数来格式化日期,支持的格式化字符见下表

javascript 复制代码
let now = dayjs() //返回当前时间
now.format('YYYY-MM-DD')
now.format('YYYY-MM-DD HH:mm:ss')
now.format('YYYY年MM月DD日')
输入 示例 描述
YY 18 两位数的年份
YYYY 2018 四位数的年份
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 秒,两位数

相对当前时间(前)

这个功能在发布文章,发布消息时很有用,我们在看评论时可以看到发布在多少时间前,这个用day.js可以轻松实现

javascript 复制代码
//day.js默认使用英文,需要加载中文包
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
// 使用relativeTime插件
import relativeTime from 'dayjs/plugin/relativeTime'
//相对当前时间(前)
dayjs.extend(relativeTime)
dayjs('2024-07-10 11:30:00').fromNow()

时间的比较

javascript 复制代码
// 默认比较毫秒数,所以2024-08-10就是比较10号的零点零分
dayjs().isBefore('2024-08-10') //是否在这之前
//默认比较毫秒数,如果想比较天数就传day
dayjs().isSame('2024-08-09', 'day')
dayjs().isAfter('2024-08-07') // 是否在这之后

时间的差异

diff函数可以返回两个日期间相差多少

javascript 复制代码
const date1 = dayjs()
//比较两个时间差异,返回月份,整数
date1.diff('2024-07-01', 'month')
//第三个参数传true就会返回浮点数
date1.diff('2024-07-01', 'month', true)

支持的单位如下

单位 缩写 描述
week w 周(Week of Year)
day d
month M 月份 (一月 0, 十二月 11)
quarter Q 季度,依赖 QuarterOfYear 插件
year y
hour h 小时
minute m 分钟
second s
millisecond ms 毫秒

操作

获取或设置年份

javascript 复制代码
dayjs().year() //获取年份
dayjs().year(2000) //设置年份

获取或设置月份

传入0到11的 number。 如果超出这个范围,它会进位到年份。

javascript 复制代码
dayjs().month()
dayjs().month(0)

获取或设置月份里的日期

接受1到31的数字。 如果超出这个范围,它会进位到月份。

javascript 复制代码
dayjs().date()
dayjs().date(1)

增加

返回增加一定时间的复制的 Day.js 对象。

javascript 复制代码
dayjs().add(7, 'day')

减去

返回减去一定时间的复制的 Day.js 对象。

javascript 复制代码
dayjs().subtract(7, 'year')

支持链式调用

javascript 复制代码
dayjs('2019-01-25').add(1, 'day').subtract(1, 'year').year(2009).toString()

时间的开始或结束

返回指定时间的开始或结束,这在某些日期查询里面很有用,比如查结束日期往往要传那天的23:59:59,就可以用endOf('day')来实现

javascript 复制代码
dayjs('2024-08-09').startOf('year') //返回2024-01-01T00:00:00+08:00
dayjs('2024-08-09').startOf('month')//返回2024-08-01T00:00:00+08:00

dayjs('2024-08-09').endOf('year') //返回2024-12-31T23:59:59+08:00
dayjs('2024-08-09').endOf('month')//返回2024-08-31T23:59:59+08:00
相关推荐
晨非辰11 分钟前
#C语言——刷题攻略:牛客编程入门训练(十一):攻克 循环控制(三),轻松拿捏!
c语言·开发语言·经验分享·学习·visual studio
haogexiaole15 分钟前
vue知识点总结
前端·javascript·vue.js
励志码农2 小时前
JavaWeb 30 天入门:第二十三天 —— 监听器(Listener)
java·开发语言·spring boot·学习·servlet
天高云淡ylz2 小时前
子网掩码的隐形陷阱:为何能ping通却无法HTTPS访问
开发语言·php
哆啦A梦15882 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
智码看视界3 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
希望20174 小时前
Golang Panic & Throw & Map/Channel 并发笔记
开发语言·golang
朗迹 - 张伟4 小时前
Golang安装笔记
开发语言·笔记·golang
yzx9910134 小时前
生活在数字世界:一份人人都能看懂的网络安全生存指南
运维·开发语言·网络·人工智能·自动化
小周同学@5 小时前
谈谈对this的理解
开发语言·前端·javascript