Day.js 是一个功能强大且易于使用的日期处理库,适合在项目中进行日期和时间的操作。通过插件可以扩展更多功能,满足不同的需求。
1.安装
npm install dayjs
2. 基础日期解析和格式化
import dayjs from 'dayjs'
// 1. 创建日期对象
const now = dayjs() // 当前时间
const date1 = dayjs('2024-03-14') // 从字符串创建
const date2 = dayjs('2024-03-14 10:30:00') // 带时间的字符串
const date3 = dayjs(new Date()) // 从 Date 对象创建
const date4 = dayjs(1710400000000) // 从时间戳创建
// 2. 常用格式化
console.log(now.format('YYYY-MM-DD')) // 2024-03-14
console.log(now.format('YYYY年MM月DD日')) // 2024年03月14日
console.log(now.format('YYYY-MM-DD HH:mm:ss')) // 2024-03-14 10:30:00
console.log(now.format('dddd')) // 星期四
console.log(now.format('MM/DD/YYYY')) // 03/14/2024
console.log(now.format('HH:mm')) // 10:30
3.日期获取和修改
// 1. 获取日期部分
const date = dayjs('2024-03-14 10:30:00')
console.log(date.year()) // 2024
console.log(date.month()) // 2 (0-11)
console.log(date.date()) // 14
console.log(date.day()) // 4 (0-6, 0是星期天)
console.log(date.hour()) // 10
console.log(date.minute()) // 30
console.log(date.second()) // 0
// 2. 修改日期
const newDate = date
.year(2025) // 设置年份
.month(3) // 设置月份
.date(15) // 设置日期
.hour(14) // 设置小时
.minute(45) // 设置分钟
.second(30) // 设置秒数
console.log(newDate.format('YYYY-MM-DD HH:mm:ss'))
4.日期操作和计算
const date = dayjs('2024-03-14')
// 1. 增加时间
console.log(date.add(1, 'day').format('YYYY-MM-DD')) // 增加1天
console.log(date.add(1, 'week').format('YYYY-MM-DD')) // 增加1周
console.log(date.add(1, 'month').format('YYYY-MM-DD')) // 增加1月
console.log(date.add(1, 'year').format('YYYY-MM-DD')) // 增加1年
console.log(date.add(2, 'hours').format('HH:mm')) // 增加2小时
// 2. 减少时间
console.log(date.subtract(1, 'day').format('YYYY-MM-DD')) // 减少1天
console.log(date.subtract(1, 'month').format('YYYY-MM-DD')) // 减少1月
// 3. 开始和结束时间
console.log(date.startOf('year').format('YYYY-MM-DD')) // 年初
console.log(date.startOf('month').format('YYYY-MM-DD')) // 月初
console.log(date.startOf('week').format('YYYY-MM-DD')) // 周初
console.log(date.startOf('day').format('HH:mm:ss')) // 天初
console.log(date.endOf('year').format('YYYY-MM-DD')) // 年末
console.log(date.endOf('month').format('YYYY-MM-DD')) // 月末
5.日期比较
const date1 = dayjs('2024-03-14')
const date2 = dayjs('2024-03-15')
// 1. 基础比较
console.log(date1.isBefore(date2)) // true
console.log(date1.isAfter(date2)) // false
console.log(date1.isSame(date2)) // false
// 2. 具体单位的比较
console.log(date1.isSame(date2, 'month')) // true (同月)
console.log(date1.isSame(date2, 'year')) // true (同年)
// 3. 比较大小
console.log(date1.diff(date2)) // 时间差(毫秒)
console.log(date1.diff(date2, 'day')) // 时间差(天)
console.log(date1.diff(date2, 'month')) // 时间差(月)
6.实用插件功能
// 1. 相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')
console.log(dayjs().fromNow()) // 几秒前
console.log(dayjs().from(dayjs('2024-01-01'))) // 2个月前
// 2. 是否相同或之前/之后插件
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
console.log(date1.isSameOrBefore(date2)) // true
console.log(date1.isSameOrAfter(date2)) // false
// 3. 周数插件
import weekOfYear from 'dayjs/plugin/weekOfYear'
dayjs.extend(weekOfYear)
console.log(dayjs().week()) // 获取当前是第几周
7.实际应用示例
// 1. 格式化日期显示
const formatDate = (date) => {
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 2. 计算剩余时间
const getRemainingTime = (endDate) => {
const end = dayjs(endDate)
const now = dayjs()
const days = end.diff(now, 'day')
const hours = end.diff(now, 'hour') % 24
const minutes = end.diff(now, 'minute') % 60
return `${days}天${hours}小时${minutes}分钟`
}
// 3. 获取日期范围
const getDateRange = (start, end) => {
const dates = []
let current = dayjs(start)
while (current.isBefore(end) || current.isSame(end)) {
dates.push(current.format('YYYY-MM-DD'))
current = current.add(1, 'day')
}
return dates
}
// 4. 判断是否是工作日
const isWorkday = (date) => {
const day = dayjs(date).day()
return day !== 0 && day !== 6
}
// 5. 获取月份天数
const getDaysInMonth = (date) => {
return dayjs(date).daysInMonth()
}
这些是 Day.js 最常用和最实用的功能。Day.js 的 API 设计简单直观,链式调用使得代码更加清晰。根据实际项目需求,你可以选择性地使用这些功能。