Lecture17-dayjs 日期时间处理

管理员
2026-10-17
前端-框架工具
63
0
文章目录

    [toc]

    单词词性音标含义
    dayjsn./ˈdeɪ dʒeɪ es/轻量日期时间库，封装解析、格式化、加减、比较
    formatv./ˈfɔːmæt/按指定格式输出时间字符串
    addv./æd/日期加法：向后加，如 add(7, 'day')
    subtractv./səbˈtrækt/日期减法：向前减，如 subtract(1, 'month')
    diffv./dɪf/计算两个日期的差值，如相差多少天
    isBeforev./ɪz bɪˈfɔː(r)/判断某个日期是否在另一个日期之前
    ISOn./ˌaɪ es ˈəʊ/国际标准时间字符串格式（如 2026-09-29T10:30:00.000Z）

    Lecture17-dayjs 日期时间处理

    1、本节讲什么

    学会用 dayjs 处理日期时间：格式化、解析、加减、比较。日期是最容易出 Bug 的地方（时区、格式、类型），用库能少踩很多坑。

    2、概念速览

    什么是 dayjs：一个超轻量的日期时间工具库。JS 自带的 Date 对象操作麻烦、易出错，dayjs 把常用的都封装好了。

    类比 Java：相当于 Java 8 的 LocalDate / DateTimeFormatter——解析、格式化、加减都一行搞定。

    正确 vs 误区：别用字符串拼日期（2025-01- + 月，容易出错）；一律用 dayjs 解析再格式化。日期是"对象"，不是"字符串"。

    3、先看效果

    npm install dayjs

    import dayjs from 'dayjs'

// 1. 格式化：把时间按你的格式输出
dayjs().format('YYYY-MM-DD HH:mm:ss')       // 现在：2026-09-29 10:30:00
dayjs('2025-01-01').format('YYYY年MM月DD日') // 2025年01月01日

// 2. 加减：加 7 天、减 1 个月
dayjs().add(7, 'day').format('YYYY-MM-DD')
dayjs().subtract(1, 'month').format('YYYY-MM-DD')

// 3. 比较：哪个更早 / 相差多少天
dayjs('2025-01-01').isBefore('2025-02-01')   // true
dayjs('2025-02-10').diff('2025-02-01', 'day') // 9

    4、照着做

    1. 安装 dayjs，跑上面三段，看输出。
    2. 场景练习：把后端返回的 "2026-09-29T10:30:00" 格式化成"2026年09月29日"。
    3. 场景练习：算两个日期相差多少天（比如活动还剩几天）。
    const start = dayjs('2026-10-01')
const now = dayjs()
const daysLeft = start.diff(now, 'day')
console.log(`距国庆还有 ${daysLeft} 天`)

    5、常见疑问

    • Q：后端返回的日期常常是 "2026-09-29T10:30:00.000Z" 这种，怎么办？ A：直接 dayjs('2026-09-29T10:30:00.000Z') 解析，再 .format('YYYY-MM-DD HH:mm')。dayjs 认识标准 ISO 字符串。
    • Q：.add(7, 'day') 第二个参数还有啥？ A：'day'（天）、'week'（周）、'month'（月）、'year'（年）、'hour'、'minute' 等。按需用。
    • Q：表格里显示日期用什么？ A：后端给原始时间 → 前端 dayjs(x).format('YYYY-MM-DD HH:mm') 再显示。别把原始 ISO 字符串直接怼到页面上。
    • Q：不会用某个方法怎么办？ A：告诉 AI"把 xxx 时间格式化成 yyyy-MM-dd"，它会用 dayjs 写好。你只要知道"日期要用 dayjs、别手拼"。

    6、规范要点

    • 所有日期格式化统一用 dayjs，别手拼字符串、别在多个地方写不同格式。
    • 可把常用格式封装成函数（如 formatTime()），全项目复用。
    • 时间字段的类型：接口里日期类型用 string（配合 interface 定义，第 6 节）。

    7、本节验证

    • 会用 dayjs().format('YYYY-MM-DD HH:mm:ss') 格式化时间 ✅
    • 会用 add / subtract 做日期加减 ✅
    • 会用 isBefore / diff 做日期比较与相差天数 ✅
    • 知道日期一律用 dayjs 解析，不用字符串手拼 ✅
    end