一文詳細講下day.js的基礎用法(干貨滿滿)

更新時間：2025年05月16日 10:17:40 作者：asecretman!

這篇文章主要介紹了day.js基礎用法的相關資料,Day.js是一個簡潔易用的日期處理庫,支持插件擴展,涵蓋日期解析、格式化、獲取、修改、操作、計算和比較等功能,文中給出了詳細的代碼示例,需要的朋友可以參考下

1.安裝

npm install dayjs

2. 基礎日期解析和格式化

import dayjs from 'dayjs'

// 1. 創(chuàng)建日期對象
const now = dayjs()                    // 當前時間
const date1 = dayjs('2024-03-14')      // 從字符串創(chuàng)建
const date2 = dayjs('2024-03-14 10:30:00') // 帶時間的字符串
const date3 = dayjs(new Date())        // 從 Date 對象創(chuàng)建
const date4 = dayjs(1710400000000)     // 從時間戳創(chuàng)建

// 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 設計簡單直觀，鏈式調用使得代碼更加清晰。根據實際項目需求，你可以選擇性地使用這些功能。