一文详细讲下day.js的基础用法(干货满满)

npm install dayjs

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

// 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'))

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'))    // 月末

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'))      // 时间差（月）

// 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())  // 获取当前是第几周

// 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()
}