Day.js 生态详解 | 前端技术导航

核心特性

Day.js 的设计哲学和关键技术特性

📦 极小体积

仅2KB（gzip），是Moment.js的1/40大小

🔄 Moment.js兼容

API完全兼容Moment.js，迁移成本极低

🔒 不可变性

所有操作返回新实例，避免副作用

🌍 国际化

支持40+语言，按需加载语言包

🔌 插件系统

模块化设计，功能按需扩展

⚡ 高性能

性能优于Moment.js和原生Date对象

生态系统

Day.js 核心插件和官方工具

相对时间插件

显示相对时间（如"3小时前"）

relativeTime 时间

持续时间插件

处理时间间隔和持续时间

duration 间隔

时区插件

处理时区转换和时区特定日期

timezone 时区

高级格式插件

支持更复杂的日期格式化

advancedFormat 格式化

快速入门

# 安装Day.js
npm install dayjs

# 基础用法
import dayjs from 'dayjs'

dayjs() // 当前时间
dayjs('2024-01-01') // 指定日期
dayjs(1704067200000) // 时间戳

# 格式化
dayjs().format('YYYY-MM-DD HH:mm:ss')
// => '2024-01-01 12:00:00'

# 相对时间
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
dayjs('2024-01-01').fromNow()
// => '3个月前'

# 国际化
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

配置示例

// 插件使用示例
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import duration from 'dayjs/plugin/duration'
import isLeapYear from 'dayjs/plugin/isLeapYear'
import weekOfYear from 'dayjs/plugin/weekOfYear'

// 扩展插件
dayjs.extend(relativeTime)
dayjs.extend(duration)
dayjs.extend(isLeapYear)
dayjs.extend(weekOfYear)

// 相对时间
dayjs('2024-01-01').fromNow() // '3个月前'
dayjs('2024-01-01').toNow() // '3个月后'

// 持续时间
const dur = dayjs.duration(2, 'hours')
dur.humanize() // '2小时'

// 闰年判断
dayjs('2024-01-01').isLeapYear() // true

// 一年中的第几周
dayjs('2024-01-01').week() // 1

// 日期计算
dayjs().add(7, 'day') // 7天后
dayjs().subtract(1, 'month') // 1个月前
dayjs().startOf('month') // 本月第一天
dayjs().endOf('year') // 今年最后一天

// 日期比较
dayjs('2024-01-01').isBefore('2024-02-01') // true
dayjs('2024-01-01').isAfter('2023-12-31') // true
dayjs('2024-01-01').isSame('2024-01-01') // true

学习资源

官方资源

学习路径

与其他日期库对比

vs Moment.js

Day.js仅2KB，不可变，现代API。Moment.js体积大，已停止维护。

vs date-fns

Day.js面向对象API，date-fns函数式API。Day.js更小，date-fns更灵活。