宅宅很神 發表於 2022-3-11 18:13:04

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

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




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

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

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


2. CDN
<!-- CDN 引入 Day.js -->
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

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



為什麼使用 Day.js ?

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

簡易

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

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

不可變的

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

國際化多語系支援

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

基本使用方法

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 (中原標準時間)


// 取得目前時間
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 時間


dayjs.extend(utc)

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

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

取得新的實例


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

驗證返回的時間是否正確


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


GET 或 SET


// 取得毫秒
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)


顯示


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

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

// 返回 '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 這套輕量級的時間處理套件。



宅宅很神 發表於 2022-3-11 18:49:29

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

計算最近7天、上週、上個月的日期
https://www.letswrite.tw/dayjs-last-week-month/
頁: [1]
檢視完整版本: Day.js - 極簡的處理時間和日期的 JavaScript 庫