Day.js - 極簡的處理時間和日期的 JavaScript 庫

宅宅很神

Day.js - 極簡的處理時間和日期的 JavaScript 庫

和 Moment.js 的 API 設計保持一樣, 但體積僅有2KB。
Github 位置
https://github.com/iamkun/dayjs
https://day.js.org/en/

Day.js 可執行於瀏覽器及 Node 環境。

1. Node

[Plain Text] 純文本查看 複制代碼

// 首先執行指令安裝 Day.js
npm install dayjs --save

[JavaScript] 純文本查看 複制代碼

// 引入 Day.js
const dayjs = require('dayjs')

// 或使用 ES6 import 方式引入 Day.js
import dayjs from 'dayjs'

// 使用 Day.js
dayjs().format()

2. CDN

[JavaScript] 純文本查看 複制代碼

<!-- CDN 引入 Day.js -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<script>
  // 使用 Day.js
  dayjs().format()
</script>

Day.js

為什麼使用 Day.js ？

下載、解析和執行更少的 JavaScript，為您的程式碼留出更多時間。如果只需要簡單功能，不使用套件的話，核心包僅有 2KB。

簡易

Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，且與知名時間處理套件 moment 的使用方式幾乎相同，如果曾使用過 moment，那上手 Day.js 會非常快。

如果您曾經用過 Moment.js, 那麼您已經知道如何使用 Day.js 。

不可變的

所有的 API 方法都將返回一個全新的 Dayjs 物件。這種設計能避免修改到原始資料，避免 bug 產生，節約除錯時間。

國際化多語系支援

Day.js 對國際化多語系支援良好。但除非手動載入，多國語言預設是不會被打包到工程里的

基本使用方法

[JavaScript] 純文本查看 複制代碼

import dayjs from 'dayjs'

dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中原標準時間)

[JavaScript] 純文本查看 複制代碼

// 取得目前時間
const now = dayjs() // 等同 dayjs(new Date())

// 可傳入 Data 物件取得目前時間
const now = dayjs(new Date())

// 取得指定時間
const date = new Date(2018, 8, 18)

// 解析日期
const date = dayjs('01-10-2020', 'MM-DD-YYYY)

// 解析日期 - 嚴格模式，包含符號
const data = dayjs('01-10-2020', 'MM-DD-YYYY， true)

取得 UTC 時間

[JavaScript] 純文本查看 複制代碼

dayjs.extend(utc)

// 取得本地時間
dayjs().format() //2019-03-06T08:00:00+08:00

// 取得 UTC 時間
dayjs.utc().format() // 2019-03-06T00:00:00Z

取得新的實例

[JavaScript] 純文本查看 複制代碼

const a = dayjs()
const b = a.clone()

驗證返回的時間是否正確

[JavaScript] 純文本查看 複制代碼

dayjs(null).isValid() // false
dayjs().isValid() // true

GET 或 SET

[JavaScript] 純文本查看 複制代碼

// 取得毫秒
dayjs().millisecond()
// 設定毫秒，如傳入數字在 0-999 範圍外，會進位到秒。
dayjs().millisecond(100)

// 取得秒
dayjs().seconds()
// 設定秒，如傳入數字在 0-59 範圍外，會進位到分鐘。
dayjs().seconds(30)


// 取得分鐘
dayjs().minute()
// 設定秒，如傳入數字在 0-59 範圍外，會進位到小時。
dayjs().minute(30)

// 取得小時
dayjs().hour()
// 設定小時，如傳入數字在 0-23 範圍外，會進位到天數。
dayjs().hour(12)

// 取得天數
dayjs().date()
// 設定天數，如傳入數字在 0-月份天數 範圍外，會進位到月份。
dayjs().date(1)

// 取得星期(幾)
dayjs().day()
// 設定星期(幾)，如傳入數字在 0-6 範圍外，會進位到週。
dayjs().day(0)

// 取得月份
dayjs().month()
// 設定月份，如傳入數字在 0-11 範圍外，會進位到年。
dayjs().month(6)

// 取得年份
dayjs().year()
// 設定年份
dayjs().year(2020)

顯示

[JavaScript] 純文本查看 複制代碼

// 默認返回 ISO 8601 時間字串，例：'2020-05-15T10:59:34+08:00'
dayjs().format() 

// 返回 'YYYYescape 2019-01-25T00:00:00-02:00Z'
dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') 

// 返回 '25/01/2019'
dayjs('2019-01-25').format('DD/MM/YYYY') 

套件使用

Day.js 核心包只包含常用功能，要使用其他功能需引入相關套件

可使用套件如下

套件名稱 / 連結	說明
AdvancedFormat	擴展 dayjs(時間).format() API 格式化模板。
BuddhistEra	擴展 dayjs(時間).format() API 支持 佛曆 格式化。
Calendar	新增 dayjs(時間).calendar() API 取得日曆時間。
CustomParseFormat	擴展 dayjs 自定義時間格式。
DayOfYear	新增 dayjs(時間).dayOfYear() API 取得或設定年份的第幾天。
Duraction	新增 dayjs.duration(時間) API 取得時間長度。
IsBetween	新增 dayjs(時間).isBetween(開始, 結束, 比較條件, 包含條件) API 取得指定日期是否介於某個範圍日期之間的 boolean 值。
IsLeapYear	新增 dayjs(時間).isLeapYear() API 取得指定日期是否為閏年的 boolean 值。
IsSameOrAfter	新增 dayjs(時間).isSameOrAfter(比較時間) API 取得 時間 是否跟 比較時間 相等或較晚的 boolean 值。
IsSameOrBefore	新增 dayjs(時間).isSameOrBefore(比較時間) API 取得 時間 是否跟 比較時間 相等或較早的 boolean 值。
IsToday	新增 dayjs(時間).isToday() API 取得 時間 是否為 今天 的 boolean 值。
IsTomorrow	新增 dayjs(時間).isTomorrow() API 取得 時間 是否為 明天 的 boolean 值。
IsYesterday	新增 dayjs(時間).isYesterday() API 取得 時間 是否為 昨天 的 boolean 值。
IsoWeek	新增 dayjs(時間).isoWeek() API 取得或設定年度 ISO 週數。 新增 dayjs(時間).isoWeekday() API 取得或設定一週的 ISO 週。 新增 dayjs(時間).isoWeekYear() API 取得 IOS 年。
IsoWeeksInYear	新增 dayjs(時間).isoWeeksInYear() API 取得一年中有幾週。
LocaleDate	新增 dayjs(時間).localeDate() API 提供本地化數據。
LocalizedFormat	新增 dayjs(時間).localizedFormat() API 擴展本地化日期格式化。
MinMax	新增 dayjs.max(...dayjs 實例)、dayjs.min(...dayjs 物件) API 比較傳入的 dayjs 實例大小。
QuarterOfYear	新增 dayjs(時間).quarterOfYear() API 取得 時間 的季度。
RelativeTime	新增 dayjs().from()、dayjs().fromNow()、dayjs().to()、dayjs().toNow() API 返回相對時間。
ToArray	新增 dayjs(時間).toArray() API 返回包含 時間 資訊的陣列
ToObject	新增 dayjs(時間).toObject() API 返回包含 時間 資訊的 object
UpdateLocale	新增 dayjs.updateLocale() API 設定語系配置。
UTC	新增 dayjs(時間).utc() API 取得使用 UTC 解析或顯示時間的 dayjs 物件。 新增 dayjs(時間).local() API 取得使用本地時間的 dayjs 物件。 新增 dayjs(時間).isUTC() API 取得 時間 是否為 UTC 模式的 boolean 值。
WeekDay	新增 dayjs(時間).weekDay() API 取得當前語言的星期。
weekOfYear	新增 dayjs(時間).weekOfYear() API 取得或設置 時間 的週。
WeekYear	新增 dayjs(時間).WeekYear() API 取得或設置 時間 的年。

Day.js 還有許多客製化及 i18n 的相關設定可以在官方說明中查看，如果專案需要做簡單的時間處理，不妨可以考慮使用 Day.js 這套輕量級的時間處理套件。

宅宅很神

中文網站
https://dayjs.fenxianglu.cn/

計算最近7天、上週、上個月的日期
https://www.letswrite.tw/dayjs-last-week-month/