Featured image of post 【JavaScript 時間套件】moment.js: 輸出格式設定、變更語系及輸出格式技巧、人類可閱讀相對時間格式

【JavaScript 時間套件】moment.js: 輸出格式設定、變更語系及輸出格式技巧、人類可閱讀相對時間格式

【JavaScript 時間套件】moment.js: 輸出格式設定、變更語系及輸出格式技巧、人類可閱讀相對時間格式

Photo by Mohammad Rahmani on Unsplash

安裝 Install

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower

格式 Format

Token Output
Month M 1 2 … 11 12
Mo 1st 2nd … 11th 12th
MM 01 02 … 11 12
MMM Jan Feb … Nov Dec
MMMM January February … November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 … 30 31
Do 1st 2nd … 30th 31st
DD 01 02 … 30 31
Day of Year DDD 1 2 … 364 365
DDDo 1st 2nd … 364th 365th
DDDD 001 002 … 364 365
Day of Week d 0 1 … 5 6
do 0th 1st … 5th 6th
dd Su Mo … Fr Sa
ddd Sun Mon … Fri Sat
dddd Sunday Monday … Friday Saturday
Day of Week (Locale) e 0 1 … 5 6
Day of Week (ISO) E 1 2 … 6 7
Week of Year w 1 2 … 52 53
wo 1st 2nd … 52nd 53rd
ww 01 02 … 52 53
Week of Year (ISO) W 1 2 … 52 53
Wo 1st 2nd … 52nd 53rd
WW 01 02 … 52 53
Year YY 70 71 … 29 30
YYYY 1970 1971 … 2029 2030
YYYYYY -001970 -001971 … +001907 +001971
Y 1970 1971 … 9999 +10000 +10001
Era Year y 1 2 … 2020 …
Era N, NN, NNN BC AD
NNNN Before Christ, Anno Domini
NNNNN BC AD
Week Year gg 70 71 … 29 30
gggg 1970 1971 … 2029 2030
Week Year (ISO) GG 70 71 … 29 30
GGGG 1970 1971 … 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 … 22 23
HH 00 01 … 22 23
h 1 2 … 11 12
hh 01 02 … 11 12
k 1 2 … 23 24
kk 01 02 … 23 24
Minute m 0 1 … 58 59
mm 00 01 … 58 59
Second s 0 1 … 58 59
ss 00 01 … 58 59
Fractional Second S 0 1 … 8 9
SS 00 01 … 98 99
SSS 000 001 … 998 999
SSSS … SSSSSSSSS 000[0..] 001[0..]998[0..] 999[0..]
Time Zone z or zz EST CST … MST PST
Z -07:00 -06:00 … +06:00 +07:00
ZZ -0700 -0600 … +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

小技巧 Tips

變更語系 Change the locale

import Moment from 'moment';
import 'moment/locale/zh-tw';

Moment.locale('zh-tw'); 

console.log(Moment("2022-12-15 14:31:00+08:00", "YYYY-MM-DD hh:mm:ssZ").fromNow());

// Format Dates
moment().format('MMMM Do YYYY, h:mm:ss a'); // 十二月 15日 2022, 5:46:15 下午
moment().format('dddd');                    // 星期四
moment().format("MMM Do YY");               // 12月 15日 22
moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
moment().format();                          // 2022-12-15T17:46:53+08:00

// Relative Time
moment("20111031", "YYYYMMDD").fromNow(); // 11 年前
moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
moment().startOf('day').fromNow();        // 18 小時前
moment().endOf('day').fromNow();          // 6 小時後
moment().startOf('hour').fromNow();       // 1 小時前

// Calendar Time
moment().subtract(10, 'days').calendar(); // 2022/12/05
moment().subtract(6, 'days').calendar();  // 上星期五 17:47
moment().subtract(3, 'days').calendar();  // 上星期一 17:47
moment().subtract(1, 'days').calendar();  // 昨天 17:47
moment().calendar();                      // 今天 17:47
moment().add(1, 'days').calendar();       // 明天 17:47
moment().add(3, 'days').calendar();       // 下星期日 17:47
moment().add(10, 'days').calendar();      // 2022/12/25

// Multiple Locale Support
moment.locale();         // zh-tw
moment().format('LT');   // 17:48
moment().format('LTS');  // 17:48:03
moment().format('L');    // 2022/12/15
moment().format('l');    // 2022/12/15
moment().format('LL');   // 2022年12月15日
moment().format('ll');   // 2022年12月15日
moment().format('LLL');  // 2022年12月15日 17:48
moment().format('lll');  // 2022年12月15日 17:48
moment().format('LLLL'); // 2022年12月15日星期四 17:48
moment().format('llll'); // 2022年12月15日星期四 17:48

Reference

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話,可以透過下面支付方式贊助作者喝咖啡,如果有什麼建議或想說的話可以贊助並留言給我
If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!
方式 Method 贊助 Donate
PayPal https://paypal.me/kejyun
綠界 ECPay https://p.ecpay.com.tw/AC218F1
歐付寶 OPay https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8
All rights reserved,未經允許不得隨意轉載
Built with Hugo
Theme Stack designed by Jimmy