day.js
是 Moment.js 的 2kB 輕量化方案,擁有同樣強大的 API
安裝
NPM:
$ npm i dayjs
CDN:
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
你也可以在 day.js
官網(wǎng)的控制臺測試該庫。
基本用法
引入 dayjs
:
import dayjs from 'dayjs'
解析:
const laborDay = dayjs('2022-5-1')
laborDay
/* M {
'$L': 'en',
'$d': 2022-04-30T16:00:00.000Z,
'$x': {},
'$y': 2022,
'$M': 4,
'$D': 1,
'$W': 0,
'$H': 0,
'$m': 0,
'$s': 0,
'$ms': 0
} */
默認情況下邑闺,Day.js 使用美國英語(en
)語言環(huán)境章蚣,而我們使用的語言是簡體中文(zh-cn
)聊闯,要使用其他語言環(huán)境卷胯,可以使用 locale
獲取或設(shè)置時間的國際化:
// 您需要單獨引入語言文件邓线,如果不使用赚楚,它們不會包含在構(gòu)建中
// 按需加載中文文件
require('dayjs/locale/zh-cn')
// 只在當前實例中使用
laborDay.locale('zh-cn')
// const laborDay = dayjs('2022-5-1', { locale: 'zh-cn' })
// 全局使用:dayjs.locale('zh-cn')
laborDay
/* M {
'$L': 'zh-cn',
...
*/
顯示方法毙沾,例如 format
:
laborDay.format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // {2022} 05-01T00:00:00 000 Z 凌晨
laborDay.format('YYYY MMMM, dddd') // 2022 五月, 星期日
laborDay.format('YYYY-MM-DD') // 2022-05-01
取值和賦值方法宠页,例如 month
和 set
:
// 月份數(shù)為 0(1月份)- 11(12月份)左胞,
laborDay.month() // 4
laborDay.set('month', 5).month() // 5
操作方法,例如 add
:
laborDay.add(1, 'year').year() // 2023
查詢方法举户,例如 isBefore
和 isAfter
:
laborDay.isBefore(dayjs()) // true
laborDay.isAfter(dayjs()) // false
高級用法
插件是一個獨立的模塊烤宙,可以添加到 Day.js 以擴展功能或添加新特性。例如俭嘁,UTC 插件添加了以 UTC 和本地時間獲取日期的方法:
const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
dayjs.extend(utc)
laborDay.utc().format() // 2022-04-30T16:00:00Z
關(guān)于國際化躺枕,我們可以使用 AdvancedFormat
、LocalizedFormat
兄淫、RelativeTime
和 Calendar
插件屯远。
以下是 Day.js 文檔 Calendar
插件的一個示例:
const dayjs = require('dayjs')
const calendar = require('dayjs/plugin/calendar')
dayjs.extend(calendar)
console.log(
dayjs().calendar(laborDay, {
sameDay: '[Today at] h:mm A', // The same day ( Today at 2:30 AM )
nextDay: '[Tomorrow at] h:mm A', // The next day ( Tomorrow at 2:30 AM )
nextWeek: 'dddd [at] h:mm A', // The next week ( Sunday at 2:30 AM )
lastDay: '[Yesterday at] h:mm A', // The day before ( Yesterday at 2:30 AM )
lastWeek: '[Last] dddd [at] h:mm A', // Last week ( Last Monday at 2:30 AM )
sameElse: 'DD/MM/YYYY' // Everything else ( 17/10/2011 )
})
)
// Today at 10:04 PM