news 2026/2/28 4:34:01

提升日期处理效率:day.js 实战经验分享

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
提升日期处理效率:day.js 实战经验分享

本文简介

点赞 + 关注 + 收藏 = 学会了


  1. 本文主要介绍我在工作中使用day.js较多的方法。

  2. 本文并不能代替day.js官方文档,日常工作中该查文档的还是要查文档。

  3. 本文是写给刚接触day.js的工友,让这部分工友能更顺利上手day.js

  4. 本文不涉及day.js插件(王国之泪通关后再写这部分吧)。



day.js 简介

day.js是一个专门处理日期和时间的工具库,它的体积只有 2KB,非常小。



安装 day.js

npm

安装

npm install dayjs --save

使用

// 引入 dayjsimportdayjsfrom'dayjs'// 输出当前时间console.log(dayjs())

cdn

访问 https://www.jsdelivr.com/package/npm/dayjs 下载最新版本的 Day.js。

<scriptsrc="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script><script>// 输出当前时间console.log(dayjs())</script>


格式化日期格式

前面我们使用dayjs()获取到当前的时间,但返回的格式不好看。

// 输出当前时间console.log(dayjs())

day.js提供了format()方法可以格式化时间。《文档:Format》

format()会返回一个字符串类型的时间。


基础用法

// 格式化当前时间console.log(dayjs().format())

自定义格式

format()支持自定义日期格式,点击查看支持的格式

常用格式我拷一份放在这里

占位符输出详情
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秒 两位数
SSS000-999毫秒 三位数
Z+05:00UTC 的偏移量,±HH:mm
ZZ+0500UTC 的偏移量,±HHmm
AAM PM
aam pm

知道这些格式,我们就可以这样写:

// 年dayjs().format('YY')// 返回 23 (写本文时是2023年)dayjs().format('YYYY')// 返回 2023// 月dayjs().format('M')// 返回当前月份(1-12)dayjs().format('MM')// 返回当前月份(01-12),用MM的话,1-9月前面会补0// 日dayjs().format('D')// 返回当前月份里的天,比如今天是5月1号,就输出1;如果今天是5月20号,就输出20dayjs().format('DD')// 返回当前月份里的天,用DD的话,1-9天前面会补0// 星期dayjs().format('d')// 返回一周中的一天,星期天是 0// 小时dayjs().format('H')// 返回小时 0-23dayjs().format('HH')// 返回小时 00-23,0-9小时前面会补0dayjs().format('h')// 返回小时 1-12dayjs().format('hh')// 返回小时 01-12,1-9小时前面会补0// 分钟dayjs().format('m')// 返回分钟 0-59dayjs().format('mm')// 返回分钟 00-59,0-9分钟前面会补0// 秒dayjs().format('s')// 返回秒 0-59dayjs().format('ss')// 返回秒 00-59,0-9秒前面会补0dayjs().format('sss')// 返回毫秒数 000-999

需要注意:

  • 大写M表示月份,小写m表示分钟。
  • 大写D表示月份里的一天,小写d表示一周中的一天
  • 大写H是24小时制,小写h是12小时制。比如下午2点 大写H是14,小写h就是2。如果是使用小写h,建议配合A或者a一起使用。

可以将上面的格式组合起来使用

/* 目标:输出当前年月日时分秒 规则:年月日用“-”分隔;时分秒用“:“分隔;年月日和时分秒之间用空格分隔 */dayjs().format('YYYY-MM-DD hh:mm:ss')/* 目标:输出当前年月日 规则:年月日用“/”分隔 */dayjs().format('YYYY/MM/DD')/* 目标:输出当前年月日 规则:使用中文的“年”、“月”、“日”单位 */dayjs().format('YYYY年MM月DD日')

dayjs()还接受传入时间参数,然后再使用format()进行格式化

dayjs('2023-05-20').format('YYYY年MM月DD日')// 返回 2023年05月20日

简单吧,好用吧~

format()和其他方法结合起来很好用,后面会举例。



获取/设置日期时间

前面的例子中我们通过dayjs().format('M')等方法可以获取当前时间或者指定时间的月份等信息。

day.js其实也提供了一些方法可以获取或者设置指定日期时间,详情可以看 文档。

我这里举个例子。

// 获取当前月份。注意:月份从0开始,0表示1月,1表示2月...dayjs().month()// 设置月份dayjs().month(10)// 设置完月份后格式化dayjs().month(10).format()

这个例子用到month()方法,如果不传参就会返回当前日期的月份,如果传了参就变成设置月份了。


还有年、日、周、时分秒等其他配置和获取的方法,请参考 文档。



日期时间计算

日期计算是工作中常用的功能,比如计算3天后的日期是多少。day.js提供了很多方便的方法。


增加日期时间

给定一个日期,希望获取该日期的后几天,或者想获取当前时间的半小时后的时间,就可以使用add()方法。

add()方法接收2个参数:

  • 第一个参数是要增加的时间,可以是负值。
  • 第二个参数是时间单位,比如daymonth等。

第二个参数支持的单位如下:

单位缩写详情
dayd
weekw
monthM
yeary
hourh小时
minutem分钟
seconds
millisecondms毫秒

其实第二个参数还支持quarter查询季度,但需要安装QuarterOfYear插件。


比如获取当前日期的后10天。

dayjs().add(10,'day')// 格式化后返回dayjs().add(10,'day').format()

如果加了10天后夸了月,day.js会自动判断的。

比如今天是2023年5月24日,加了10天就是2023年6月3日。


获取当前时间的半小时后的时间。

dayjs().add(30,'minute')// 或者dayjs().add(0.5,'hour')

如果传入的值是负数,那返回的时间就是往前计算的。

比如获取10天前的时间。

dayjs().add(-10,'day')

使用add()方法第一个参数最好还是传入正数,因为想获取之前的时间,可以使用subtract()方法。


减少日期时间

subtract()方法和add()的用法一样。

subtract()的作用是返回减去一定时间的值。

比如想获取10天前的时间值可以这样写。

dayjs().subtract(10,'day')

subtract()的第一个参数同样可以传入负数,但没必要这么做。


subtract()方法很适合用在日历组件的快捷选项,比如获取1周内的时间。

// 当前时间dayjs().format('YYYY-MM-DD hh:mm:ss')// 7天前的时间dayjs().subtract(7,'day').format('YYYY-MM-DD hh:mm:ss')

获取开始日期时间

使用startOf()方法可以获取开始时间日期。

startOf()需要传入一个单位参数,这个参数支持以下值:

单位缩写详情
yeary今年一月1日上午 00:00
monthM本月1日上午 00:00
weekw本周的第一天上午 00:00 (取决于国际化设置)
dateD当天 00:00
dayd当天 00:00
hourh当前时间,0 分、0 秒、0 毫秒
minutem当前时间,0 秒、0 毫秒
seconds当前时间,0 毫秒

其中quarter需要另外安装QuarterOfYear插件,isoWeek需要另外安装IsoWeek插件。


比如,我要获取当月的1号到今天的日期。

// 今天的日期dayjs().format()// 本月的第一天日期dayjs().startOf('month').format()

我在项目中,图表部分有时候会有这种需求。


再比如,有些时候我们可能想获取当前时间的本周第一天,比如今天是2023年5月25号星期4,我想看看这周的周一是几号,就可以这么写:

dayjs().startOf('week').format('DD')// 返回 21。2023年5月21号是星期1

获取结束日期时间

有获取开始日期时间就有获取结束日期时间。

day.js提供了endOf()方法获取结束日期时间。

比如要获取当前日期的23:59:59

dayjs().endOf('day').format()

endOf()通常会和startOf()结合使用,这样就可以获取一个比较完整的时间段。

比如要获取 2020年2月的开始和结束日期。

// 2020年2月开始日期时间 dayjs('2020-02').startOf('month').format() // 2020年2月结束日期时间 dayjs('2020-02').endOf('month').format()

像2月这种不能一眼看出有多少天的月份,用endOf()方法就非常方便了。


计算2个日期时间差

如果要计算2个日期时间的差异,可以使用diff()方法。

diff()的语法:

时间1.diff(时间2)时间1.diff(时间2,时间单位)

如果不传第二个参数(时间单位),默认返回毫秒数。


举个例子,计算北京奥运会开幕式到现在过了多少天。

// 北京奥运会开幕时间constopeningDate=dayjs('2008-08-08')// 当前时间constnow=dayjs()// 计算北京奥运开幕式到现在过了多少毫秒now.diff(openingDate)// 计算北京奥运开幕式到现在过了多少天now.diff(openingDate,'day')

单位时间除了'day'之外,还支持以下单位:

单位缩写详情
dayd
weekwWeek of Year
quarterQQuarter
monthM月份 (一月 0, 十二月 11)
yearyYear
hourhHour
minutemMinute
secondsSecond
millisecondmsMillisecond


日期时间查询

查询指定月份有多少天

我还记得小学数学老师教我们数一个月有多少天的方法。

举起一个拳头👊

不好意思,搞错了。。。

从食指往小拇指方向数,凸起来的是31天,凹下去的是30天,2月份除外。

因为有闰年的存在,2月的天数是不定的。

day.js提供了daysInMonth()方法可以快速查询指定月份有多少天。

dayjs('2008-02').daysInMonth()// 返回29dayjs('2023-02').daysInMonth()// 返回28

查询时间是否在另一个时间之前

查询一个时间是否在另一个时间之前,用的是isBefore()方法。

比如查询当前日期是否在北京奥运会开幕式之前

dayjs().isBefore(dayjs('2008-08-08'))

isBefore()接受第二个参数:时间单位。

比如传入month,就通过年和月来对比。

ayjs().isBefore(dayjs('2008-08-08'),'month')

查询时间是否在另一个时间之后

查询一个时间是否在另一个时间之后,用的是isAfter()方法。

比如查询当前日期是否在北京奥运会开幕式之后

dayjs().isAfter(dayjs('2008-08-08'))

isAfter()也支持传入第二个参数:时间单位。


判断两个时间是否相同

判断两个时间是否相同使用的方法是isSame()

isSame()方法默认使用毫秒来判断。

dayjs().isSame(dayjs('2008-08-08'))

如果想判断年份或者月份是否相同,就需要传入第二个参数:时间单位。

// 年份相同就返回 true,否则返回 falsedayjs().isSame('2008-08-08','year')// 年份和月份相同才返回 true,否则返回 falsedayjs().isSame('2008-08-08','month')// 年月日都相同才返回 true,否则返回 falsedayjs().isSame('2008-08-08','day')

是否在其他两个的日期时间之间

判断一个时间是否在某个时间段内,需要用到 IsBetween 插件。

如果不想下载这个插件,完全可以通过isBefore()isAfter()组合起来进行判断。

比如判断当前时间是否在2019年 至 2025年之间,可以这么写:

// 当前时间constnow=dayjs()// 判断结果now.isAfter('2019')&&now.isBefore('2025')

day.js 轻量实用,能高效搞定日期格式化、计算与时间查询需求,落地时要考虑组件复用、快速部署的工程效率问题。试试RollCode 低代码平台,轻松实现私有化部署、自定义组件、静态页面发布(SSG + SEO)。


点赞 + 关注 + 收藏 = 学会了

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/27 12:38:05

CNN输出尺寸设计指南:从原理到实战,告别尺寸不匹配!

CNN输出尺寸设计指南&#xff1a;从原理到实战&#xff0c;告别尺寸不匹配&#xff01; 引言 在构建卷积神经网络&#xff08;CNN&#xff09;时&#xff0c;你是否曾为复杂的输出尺寸计算而头疼&#xff1f;是否在模型拼接时频繁遭遇“尺寸不匹配”的错误&#xff1f;输出尺…

作者头像 李华
网站建设 2026/2/25 3:40:50

深入浅出CNN感受野:从数学原理到实战避坑指南

深入浅出CNN感受野&#xff1a;从数学原理到实战避坑指南 引言 在卷积神经网络&#xff08;CNN&#xff09;的世界里&#xff0c;“感受野”是一个既基础又至关重要的概念。它决定了网络“看到”输入图像的视野范围&#xff0c;直接影响着特征提取的能力与模型性能。你是否曾…

作者头像 李华
网站建设 2026/2/27 21:07:47

电商项目核心订单系统设计与实现:从业务分析到分库分表全解析

一、订单系统业务分析订单系统是电商平台最重要的子系统之一&#xff0c;承载着用户交易的核心数据。一个合格的订单系统必须保证数据绝对正确&#xff0c;即使在复杂的分布式环境下也能保持一致性。主要挑战包括&#xff1a;代码正确性&#xff1a;避免因Bug导致数据错误。事务…

作者头像 李华
网站建设 2026/2/27 19:50:17

写作压力小了!9个AI论文写作软件测评:本科生毕业论文+开题报告神器推荐

随着人工智能技术的不断进步&#xff0c;学术写作工具正在成为高校学生和研究人员不可或缺的助手。尤其是对于本科生而言&#xff0c;撰写毕业论文和开题报告往往面临时间紧张、资料查找困难、格式规范不熟悉等多重挑战。为了帮助更多学生找到适合自己的高效写作工具&#xff0…

作者头像 李华
网站建设 2026/2/28 3:54:39

专著署名主编还是著?——专著署名方式答疑

专著署名主编还是著&#xff1f;有些作者出版了一本学术专著&#xff0c;但署名的是主编&#xff0c;不是著。署名主编的专著&#xff0c;评职称认可吗&#xff1f;评正高、副高职称能不能用&#xff1f;下面淘淘学术给大家讲解这个问题。 一、著、主编、编著的区别 著 著&a…

作者头像 李华
网站建设 2026/2/25 13:46:17

Vue 教程 自定义指令 + 生命周期全解析

Vue 3 自定义指令 完整生命周期详解&#xff08;2025–2026 实用版&#xff09; Vue 3 的自定义指令和组件生命周期是中高级开发中非常高频的内容&#xff0c;尤其在以下场景中几乎必考/必用&#xff1a; 复杂表单&#xff08;自动聚焦、输入防抖、权限显隐&#xff09;拖拽…

作者头像 李华