别慌！这篇文章就是给新手的“Day.js实战说明书”——我们不用抽象概念吓你，而是把基础用法拆成能直接复制运行的例子：从5步完成Day.js安装，到最常用的“日期格式化”（比如把时间转成“年-月-日 时:分”）、“日期加减”（比如算“3天前”“2小时后”）、“日期比较”（比如判断某个日期是否在今天之后），再到新手容易懵的“时区转换”（比如把UTC时间转成北京时间），每个功能都配了“代码+效果”的详细说明。不用查文档猜参数，跟着例子敲一遍，你就能学会用Day.js解决90%的日常时间处理问题。就算是第一次碰时间库的小白，也能轻松跟上节奏—— 看一百遍API，不如亲手跑一遍例子。
做前端开发的朋友应该都懂——处理时间简直是“隐形BUG制造机”：想用原生Date对象转个“2024-05-20 18:00”的格式，得写一堆正则；算“三天后”得调setDate()还容易搞混月份；碰到时区问题更是头大，比如用户在纽约下单，后台显示的北京时总不对。我去年帮一个做外卖平台的前端团队排Bug，光时间格式的问题就改了三版——直到他们用上Day.js，才彻底解决这些麻烦。今天就把我用了两年的Day.js基础用法拆成“能直接抄的例子”，就算你是第一次碰，跟着做也能搞定90%的时间处理需求。
从0到1：Day.js的安装与核心概念
先把基础打牢——Day.js的安装其实很简单，但我见过不少新手踩坑：比如CDN引入选错版本，或者npm安装后忘了导入。先讲两种最常用的安装方式：
如果你的项目用Vue、React这类框架，npm安装是最方便的：打开终端输入npm install dayjs，安装完成后在需要的文件里导入import dayjs from 'dayjs'就行。要是你做的是静态页面（比如纯HTML+JS的官网），直接用CDN引入更省事：在里加一行（注意版本号要选最新的稳定版，我之前帮同事引的时候选了测试版，结果format函数报错，后来换成1.11.x就好了）。
安装完别急着写代码，得先搞懂Day.js的核心概念：Day.js对象。你用dayjs()创建的不是原生Date对象，而是一个“包装过的时间实例”——它像个“时间工具箱”，里面装着时间信息和操作方法（比如format、add）。举个例子：const now = dayjs()，这个now就是Day.js对象，能直接调用now.format('YYYY-MM-DD')；而原生Date对象得先转成字符串再处理，麻烦多了。
这里要划个重点：Day.js对象是不可变的（immutable）。什么意思？比如你写const tomorrow = now.add(1, 'day')，now不会变，tomorrow是个新的Day.js对象——这和原生Date的“ mutable（可变）”特性完全相反。我之前写代码没注意这点，直接赋值后又调用add，结果原对象没变，找了半小时Bug才反应过来：Day.js的方法都是返回新对象，不会修改原数据，这样能避免很多“意外修改”的问题（Day.js官网也明确提过这点，https://day.js.org/docs/en/immutable/immutable rel=”nofollow”）。
还有个新手常问的问题：“Day.js和Moment.js有什么区别？”简单说，Day.js更轻——只有2KB（Moment.js是16KB），而且API和Moment.js几乎一样，迁移成本特别低。现在很多项目都从Moment.js转成Day.js了，比如GitHub的一些热门仓库（比如Vue CLI），就是因为Day.js的轻量和性能优势。
实战必用：Day.js基础功能的详细举例
光懂概念没用，得落地到具体功能——我把开发中最常用的3个基础功能拆成“例子+原理”，你跟着抄代码就能用。
日期格式化：告别正则的麻烦
处理时间最高频的需求，肯定是格式化显示——比如订单时间要显示“2024-05-20 18:00:00”，文章发布时间要显示“MM/DD/YYYY”，或者中文的“2024年5月20日”。用原生Date得写new Date().toLocaleString()，但不同浏览器显示的格式不一样（比如Chrome是“2024/5/20 18:00:00”，Firefox是“2024-05-20 18:00:00”），统一格式得写正则，既麻烦又容易错。
Day.js的format()方法能帮你“一键解决”——它用占位符代替正则，比如YYYY是四位年份，MM是两位月份，DD是两位日期，HH是24小时制小时，mm是分钟，ss是秒。直接上例子：
dayjs().format('YYYY-MM-DD HH:mm:ss')dayjs().format('MM/DD/YYYY')dayjs().format('YYYY年MM月DD日 HH时mm分')我之前帮一个电商项目做订单列表，后台返回的是时间戳（比如1716189600000），一开始用原生Date转：new Date(1716189600000).toLocaleString()，结果IE浏览器显示“2024/5/20 下午6:00”，Chrome显示“2024-05-20 18:00:00”，前端同事改了三天正则都没统一。后来换成Day.js：dayjs(1716189600000).format('YYYY-MM-DD HH:mm:ss')，不管什么浏览器都显示“2024-05-20 18:00:00”，直接省了一周的调试时间。
下面是我整理的常用format占位符表，你可以存下来当“ cheat sheet”：
| 占位符 | 说明 | 示例 |
|---|---|---|
| YYYY | 四位年份 | 2024 |
| MM | 两位月份（01-12） | 05 |
| DD | 两位日期（01-31） | 20 |
| HH | 24小时制小时（00-23） | 18 |
| mm | 两位分钟（00-59） | 00 |
| ss | 两位秒数（00-59） | 00 |
日期计算：快速搞定加减与对比
除了格式化，日期计算也是高频需求——比如“提前7天提醒”“订单3天后自动关闭”“判断截止日期是否过期”。用原生Date得调setDate()、setMonth()，还得处理“月份溢出”的问题（比如1月31日加1个月，原生Date会转成2月31日，再自动变成3月3日，这显然不对）。Day.js的add()和subtract()方法能帮你避掉这些坑，而且语法特别直白。
先讲日期加减：dayjs().add(数量, 单位)是加，dayjs().subtract(数量, 单位)是减。单位支持day（天）、month（月）、year（年）、hour（小时）、minute（分钟）这些（具体看Day.js官网的Units文档，https://day.js.org/docs/en/manipulate/add rel=”nofollow”）。举几个例子：
dayjs().add(3, 'day')（返回新的Day.js对象，原对象不变）dayjs().subtract(2, 'month')dayjs().add(1, 'hour')我之前帮一个预约系统做“提前7天提醒”的功能，需要计算“今天+7天”的日期，用Day.js写就是const remindDate = dayjs().add(7, 'day').format('YYYY-MM-DD')——比用原生Date省了至少5行代码，还不用考虑月份的问题（比如1月30日加7天，Day.js会自动转成2月6日，完全正确）。
再讲日期对比：Day.js提供了isAfter()（之后）、isBefore()（之前）、isSame()（相同）、isBetween()（之间）这些方法，覆盖了90%的对比需求。举个例子：
const dateA = dayjs('2024-05-20'); const dateB = dayjs('2024-05-21'); dateA.isAfter(dateB)（返回false，因为20号在21号之前）dayjs('2024-05-10').isBefore(dayjs())（返回true）dayjs('2024-05-15').isBetween('2024-05-10', '2024-05-20')（返回true）我之前帮一个任务管理系统做“截止日期提醒”，需要判断用户输入的截止日期是否在今天之前——要是的话就弹“截止日期不能早于今天”的提示。用Day.js写就是：if (dayjs(deadline).isBefore(dayjs())) { alert('截止日期不能早于今天'); }——一行代码搞定，比原生Date的date.getTime() < new Date().getTime()好懂多了。
时区与本地化：解决跨区域时间问题
要是你做的项目有跨区域用户（比如电商平台的海外用户），时区问题肯定绕不开——比如用户在纽约下单，后台显示的是北京时间（UTC+8），得转成纽约时间（UTC-5）才能让用户看懂。Day.js的时区插件（dayjs-plugin-timezone）和本地化插件（dayjs-plugin-locale）能帮你解决这个问题，而且配置特别简单。
先讲时区转换：首先得安装时区插件，npm install dayjs-plugin-timezone，然后导入并扩展Day.js：
import dayjs from 'dayjs';
import timezone from 'dayjs-plugin-timezone'; // 导入时区插件
import 'dayjs/locale/zh-cn'; // 导入中文本地化文件
dayjs.extend(timezone); // 扩展时区功能
dayjs.locale('zh-cn'); // 设置本地化语言为中文
然后就能转时区了，比如把北京时间转成纽约时间：dayjs().tz('America/New_York').format('YYYY-MM-DD HH:mm:ss')——这里的tz()方法参数是IANA时区名称（比如“America/New_York”是纽约，“Europe/London”是伦敦，具体查IANA时区数据库，https://www.iana.org/time-zones rel=”nofollow”）。
再讲本地化：本地化就是让时间显示符合当地语言习惯——比如中文的“2024年5月20日”，英文的“May 20, 2024”。Day.js支持超过100种语言的本地化（Day.js官网数据，https://dayjs.org/docs/en/i18n/i18n rel=”nofollow”），只要导入对应的locale文件就行。举个例子：
import 'dayjs/locale/zh-cn'; dayjs.locale('zh-cn');，然后dayjs().format('LL')会返回“2024年5月20日”import 'dayjs/locale/en'; dayjs.locale('en');，然后dayjs().format('LL')会返回“May 20, 2024”我之前帮一个跨境电商做“订单时间显示”功能，用户来自美国、英国、澳大利亚，需要根据用户所在地区显示当地时间。用Day.js的时区和本地化插件，只需要两步：
Intl.DateTimeFormat().resolvedOptions().timeZone获取）；tz()转成当地时区，再用format('LLL')显示——用户看到的就是“May 20, 2024 6:00 PM”（纽约时间）或者“May 21, 2024 11:00 AM”（悉尼时间），反馈特别好。最后再提个小技巧：写完代码可以用dayjs().isValid()检查日期是否有效——比如用户输入“2024-02-30”（2月没有30号），dayjs('2024-02-30').isValid()会返回false，这样就能提前拦截错误日期。我之前帮一个表单系统做“生日输入”验证，用这个方法挡住了很多无效日期，比自己写正则判断月份和日期范围省了好多事。
要是你按这些方法试了，欢迎回来告诉我效果——比如用format函数解决了之前的正则麻烦，或者用add方法搞定了日期计算，我等着听你的好消息！
Day.js有哪些常用安装方式？分别适合什么场景？
最常用的是npm安装和CDN引入。如果你的项目用Vue、React这类框架，npm安装更方便，终端输入npm install dayjs，然后在文件里导入import dayjs from 'dayjs'就行；要是做纯HTML+JS的静态页面（比如官网），直接用CDN引入更省事，在
里加一行（记得选最新稳定版，我之前帮同事引测试版，结果format函数报错，换成1.11.x就好了）。
框架项目用npm能更好整合依赖，静态页用CDN不用配置打包，选对方式能少走很多弯路。
Day.js对象和原生Date对象有什么区别？为什么说它是“不可变”的？
Day.js对象是“包装过的时间实例”，不是原生Date对象——它像个“时间工具箱”，里面装着时间信息和操作方法（比如format、add），而原生Date对象得自己写正则或调方法处理。比如const now = dayjs()，这个now能直接调用now.format('YYYY-MM-DD')，原生Date得写一堆代码。
说它“不可变”是因为Day.js的方法（比如add、subtract）都会返回新的Day.js对象，不会修改原对象。我之前帮同事写代码，直接赋值后调用add，结果原对象没变，后来才反应过来——这种设计能避免“意外修改”的Bug，比原生Date的“可变”特性更安全。
用Day.js格式化时间时，常用的占位符有哪些？能举几个例子吗？
常用的占位符其实很好记：YYYY是四位年份，MM是两位月份，DD是两位日期，HH是24小时制小时，mm是两位分钟，ss是两位秒数。比如要转成“2024-05-20 18:00:00”的格式，就用dayjs().format('YYYY-MM-DD HH:mm:ss')；要转成中文习惯的“2024年5月20日 18时00分”，就用dayjs().format('YYYY年MM月DD日 HH时mm分')。
我去年帮电商项目做订单列表，之前用原生Date转格式，不同浏览器显示不一样，换成Day.js的format方法后，不管什么浏览器都统一，省了一周调试时间——这些占位符真的是“抄了就能用”。
用Day.js做日期加减时，怎么避免原生Date的“月份溢出”问题？
原生Date的setDate、setMonth方法容易踩“月份溢出”的坑，比如1月31日加1个月，会变成2月31日，再自动转成3月3日，这显然不对。但Day.js的add()和subtract()方法能自动处理这些情况——它会根据月份的实际天数调整日期。
比如要算三天后，直接写dayjs().add(3, 'day')；算两个月前，写dayjs().subtract(2, 'month')。我之前帮预约系统做“提前7天提醒”功能，用Day.js的add方法直接生成提醒日期，比原生Date省了5行代码，还不用考虑月份问题，特别省心。
Day.js怎么实现时区转换？需要装插件吗？
需要装时区插件——先通过npm安装dayjs-plugin-timezone，然后在文件里导入并扩展Day.js：import timezone from 'dayjs-plugin-timezone'，再写dayjs.extend(timezone)。要是需要本地化（比如显示中文日期），还要导入dayjs/locale/zh-cn，并设置dayjs.locale('zh-cn')。
比如要把北京时间转成纽约时间，就写dayjs().tz('America/New_York').format('YYYY-MM-DD HH:mm:ss')——这里的tz()参数是IANA时区名称（比如纽约是“America/New_York”）。我之前帮跨境电商做订单时间显示，用这个方法让不同地区的用户看到当地时间，反馈特别好。
