使用 Day.js 模塊實現(xiàn)國際化日期

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

查看所有可用格式的列表

取值和賦值方法宠页,例如 monthset

// 月份數(shù)為 0(1月份)- 11(12月份)左胞,
laborDay.month() // 4

laborDay.set('month', 5).month() // 5

操作方法,例如 add

laborDay.add(1, 'year').year() // 2023

查詢方法举户,例如 isBeforeisAfter

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)于國際化躺枕,我們可以使用 AdvancedFormatLocalizedFormat兄淫、RelativeTimeCalendar 插件屯远。

以下是 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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市捕虽,隨后出現(xiàn)的幾起案子慨丐,更是在濱河造成了極大的恐慌,老刑警劉巖泄私,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件房揭,死亡現(xiàn)場離奇詭異备闲,居然都是意外死亡,警方通過查閱死者的電腦和手機捅暴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門恬砂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蓬痒,你說我怎么就攤上這事泻骤。” “怎么了梧奢?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵狱掂,是天一觀的道長。 經(jīng)常有香客問我亲轨,道長趋惨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任惦蚊,我火速辦了婚禮器虾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蹦锋。我一直安慰自己兆沙,他們只是感情好,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布莉掂。 她就那樣靜靜地躺著挤悉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪巫湘。 梳的紋絲不亂的頭發(fā)上装悲,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機與錄音尚氛,去河邊找鬼诀诊。 笑死,一個胖子當著我的面吹牛阅嘶,可吹牛的內(nèi)容都是我干的属瓣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼讯柔,長吁一口氣:“原來是場噩夢啊……” “哼抡蛙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起魂迄,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤粗截,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后捣炬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熊昌,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡绽榛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了婿屹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灭美。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖昂利,靈堂內(nèi)的尸體忽然破棺而出届腐,到底是詐尸還是另有隱情,我是刑警寧澤蜂奸,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布梯捕,位于F島的核電站,受9級特大地震影響窝撵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜襟铭,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一碌奉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧寒砖,春花似錦赐劣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至漠嵌,卻和暖如春咐汞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背儒鹿。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工化撕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人约炎。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓植阴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親圾浅。 傳聞我的和親對象是個殘疾皇子掠手,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容