神魂顛倒論壇

 取回密碼
 加入會員
搜尋
檢視: 2596|回覆: 1
收起左側

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

[複製連結]
發表於 2022-3-11 18:13:04 | 顯示全部樓層 |閱讀模式
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


為什麼使用 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 這套輕量級的時間處理套件。



 樓主| 發表於 2022-3-11 18:49:29 | 顯示全部樓層
中文網站
https://dayjs.fenxianglu.cn/

計算最近7天、上週、上個月的日期
https://www.letswrite.tw/dayjs-last-week-month/
您需要登入後才可以回帖 登入 | 加入會員

本版積分規則

Archiver|手機版|小黑屋|Flash2u論壇

GMT+8, 2022-5-17 12:23 , Processed in 0.241875 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回覆 回到頂端 返回清單