ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Day.js时间操作用法大全:add、subtract、startOf、set的15个实战技巧

Day.js时间操作用法大全:add、subtract、startOf、set的15个实战技巧 Day.js时间操作用法大全add、subtract、startOf、set的15个实战技巧【免费下载链接】dayjs⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API项目地址: https://gitcode.com/gh_mirrors/da/dayjsDay.js 是一款仅 2kB 的不可变immutable日期时间库是 Moment.js 的轻量替代品提供完全一致的现代 API。本文带你快速掌握 Day.js 时间操作四大核心方法add加时间、subtract减时间、startOf取时间起点、set设置指定值并附上 15 个新手也能直接上手的实战技巧帮助你高效完成时间加减、区间截取和日期修改等常见需求。 上图是 Day.js 与 Moment.js 的下载量对比。可以看到Day.js 的时间操作库下载量持续攀升成为越来越多项目的首选。一、先认识 Day.js 时间操作的基本规则在动手之前先记住 3 条底层规则后面的技巧全部基于此不可变性所有操作add、set等都返回新对象不会修改原对象这从 src/index.js 的clone、set等实现中可以看到——每次设置都会先clone()再修改。单位写法灵活day、days、d三种写法等价完整定义见 src/constant.js毫秒、秒、分、时、天、周、月、季、年。单位支持缩写与全称类型声明中还包含week | weeks | w等变体参考 types/index.d.ts。dayjs(2025-03-15)二、add 加时间日期推进的 4 个技巧add(number, units)用于在当前时间基础上增加一段时间源码位于 src/index.js。技巧 1按天、周、月快速推进dayjs(2025-03-15).add(7, day) // 2025-03-22 dayjs(2025-03-15).add(2, week) // 2025-04-05✅ 适用场景计算订单到期日、会员有效期截止时间。技巧 2按月加时间时自动处理月末溢出这是最容易踩坑的地方。2011-10-31加 1 个月后11 月没有 31 号Day.js 会自动回退到 11 月 30 日这一行为与 Moment.js 完全一致测试用例见 test/manipulate.test.jsdayjs(2011-10-31).add(1, month) // 2011-11-30自动回退 dayjs(2016-01-31).add(1, month) // 2016-02-29自动回退技巧 3支持小数和字符串参数add的第一个参数会被Number()转换所以传字符串2或小数0.5都可以验证见 test/manipulate.test.jsdayjs(2025-03-15 12:00).add(0.5, day) // 2025-03-16 00:00 dayjs().add(2, years) // 字符串数字也可用技巧 4add 可以链式调用实现复合时间表达式dayjs(2025-03-15).add(1, year).add(1, month).add(3, day) // 2026-04-181年1个月3天后 面试与业务中最常用的就是这种写法合同3年后每年延期的下一天。三、subtract 减时间倒推日期的 3 个技巧subtract(number, units)的实现非常简单——本质上就是调用add(number * -1, string)见 src/index.js。技巧 5计算多久之前dayjs(2025-03-15).subtract(1, month) // 2025-02-15 dayjs(2025-03-15).subtract(3, day) // 2025-03-12技巧 6结合 diff 做时间轴展示先算两个时间的差值再反向减去就能生成列表中的相对日期const now dayjs() const diffDays now.diff(start, day) // 相差多少天 dayjs().subtract(diffDays, day) // start 当天⚠️ 注意diff默认返回取整值想要精确值传第三个参数true。技巧 7subtract 同样受月末溢出保护dayjs(2025-03-31).subtract(1, month) // 2025-02-28自动回退到2月最后一天四、startOf / endOf 取时间边界截取区间的 4 个技巧startOf(units)会把时间归零到某个单位的起点endOf则取终点23:59:59.999核心逻辑在 src/index.js。技巧 8拿到今天的开始和结束时刻dayjs().startOf(day) // 2025-03-15T00:00:00 dayjs().endOf(day) // 2025-03-15T23:59:59.999✅ 这是做日期区间查询最常用的组合startOf(day)到endOf(day)覆盖完整一天避免漏掉当天数据。技巧 9单位支持大小写和复数灵活不挑人Year、year、years都能用未知单位则原样返回见 test/manipulate.test.jsdayjs().startOf(Month) // 月初 dayjs().endOf(week) // 周日 23:59:59.999技巧 10startOf(week) 的一周起点受语言环境locale影响中文 locale 默认一周从周日开始英文 locale 从周一开始这一行为与 Moment.js 对齐测试见 test/manipulate.test.js。如果你做周报、日历组件务必显式设置 locale 再取周起点dayjs(2019-02-14).locale(zh-cn).startOf(week)技巧 11用 startOf endOf 实现是否在某时间段内判断这是isSame方法内部的实现思路src/index.js你可以直接复用const inToday dayjs(date).isSame(dayjs(), day) // 等价于startOf(day) date endOf(day)五、set 设置指定值精准改时间的 4 个技巧set(string, int)用于直接设置某个时间单位实现见 src/index.js。技巧 12直接设定年、月、日、时、分、秒dayjs().year(2030) // 改为 2030 年 dayjs().month(0) // 改为 1 月⚠️ 月份从 0 开始 dayjs().hour(9).minute(30) // 改为 09:30⚠️新手最大坑点month()取值范围是0-111 月是012 月是11类型注释中也有明确说明types/index.d.ts。技巧 13set 年月时自动处理月末溢出源码中set月份/年份时会先跳到当月 1 号再改最后用Math.min(this.$D, date.daysInMonth())把日回退到合法范围src/index.jsdayjs(2025-03-31).month(1) // 3月31日设成2月 自动变成 2025-02-28技巧 14set 与 get 是同族 API可以互相组合Day.js 为每个单位生成了有参是 set、无参是 get的双向方法src/index.js所以取出来→修改→再塞回去的套路非常顺手// 把今天改成下个月的同一天早上8点 dayjs().month(dayjs().month() 1).hour(8).minute(0).second(0)技巧 15修改前先 clone保持原对象不变虽然 Day.js 本身不可变但链式写法中多次 set 容易让阅读者困惑建议先克隆再改这也是官方推荐写法types/index.d.tsconst original dayjs(2025-03-15) const modified original.clone().set(hour, 12) // original 依然是 2025-03-15 00:00不受影响六、常见组合实战把 4 个方法串起来场景 1计算每月 1 号 0 点到每月最后一天 24 点的账单周期const start dayjs(2025-03-15).startOf(month) // 2025-03-01T00:00 const end dayjs(2025-03-15).endOf(month) // 2025-03-31T23:59:59.999场景 2生成未来 7 天的日期列表签到、排期常用for (let i 0; i 7; i) { dayjs().add(i, day).format(YYYY-MM-DD) }场景 3把任意时间统一对齐到整点后再加 1 小时dayjs(2025-03-15 14:37:22).startOf(hour).add(1, hour) // 2025-03-15 15:00:00七、快速速查表方法作用典型用法add(n, unit)加时间自动处理月末溢出.add(1, month)subtract(n, unit)减时间内部即负数 add.subtract(7, day)startOf(unit)取单位起点归零.startOf(day)endOf(unit)取单位终点.endOf(week)set(unit, v)直接设置某单位.hour(9)get(unit)读取某单位.month()八、总结与进阶建议记住三条铁律操作返回新对象不可变、月份从 0 开始、月末自动回退。add/subtract 适合相对时间set 适合绝对赋值startOf/endOf 适合区间截取——按需组合几乎能覆盖 90% 的时间处理场景。完整 API 说明可查阅官方文档 docs/en/API-reference.md中文版本在 docs/zh-cn/API-reference.md。想扩展能力如 ISO 周、农历、时长 durationDay.js 采用插件机制通过dayjs.extend加载插件源码位于 src/plugin/用法见 docs/zh-cn/Plugin.md。掌握以上 15 个技巧后Day.js 的时间操作对你来说就再也不是难题。动手到你的项目里试试吧【免费下载链接】dayjs⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API项目地址: https://gitcode.com/gh_mirrors/da/dayjs创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表