Javascript Moment.js library介紹

Moment設計在瀏覽器和Node.js中均可使用，本篇以在瀏覽器上面使用來介紹。

當我們製作多語系或跨境網站的時候，在網站前端要顯示關於時間的地方時候，會遇到關於時區、時間格式這些問題，而Moment.js就提供了非常多方法來解決時間上會遇到的問題。

導入的方法非常簡單

<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script>
    moment().format();
</script>

這樣就能在<script>裡開始使用moment.js的功能了

一些比較常用的情境

格式化日期

moment().format('MMMM Do YYYY, h:mm:ss a'); // February 26th 2020, 2:15:04 pm
moment().format('dddd');                    // Wednesday
moment().format("MMM Do YY");               // Feb 26th 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                      // 2020-02-26T14:15:04+08:00

取得相對時間

moment("20111031", "YYYYMMDD").fromNow(); // 8 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 8 years ago
moment().startOf('day').fromNow();        // 14 hours ago
moment().endOf('day').fromNow();          // in 10 hours
moment().startOf('hour').fromNow();       // 15 minutes ago

日曆時間

moment().subtract(10, 'days').calendar(); // 02/16/2020
moment().subtract(6, 'days').calendar();  // Last Thursday at 2:15 PM
moment().subtract(3, 'days').calendar();  // Last Sunday at 2:15 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 2:15 PM
moment().calendar();                      // Today at 2:15 PM
moment().add(1, 'days').calendar();       // Tomorrow at 2:15 PM
moment().add(3, 'days').calendar();       // Saturday at 2:15 PM
moment().add(10, 'days').calendar();      // 03/07/2020

而顯示的日期格式目前看到的都是英文，因為moment locale預設是en，所以想要顯示自己國家的文字，把locale修改成自己的國家的就行了，例如設定台灣locale後

moment.locale('zh-tw');
moment().format('MMMM Do YYYY, h:mm:ss a'); // 二月 26日 2020, 2:57:55 下午
moment().format('dddd');                    // 星期三
moment().format("MMM Do YY");             // 2月 26日 20
moment("20111031", "YYYYMMDD").fromNow(); // 8 年前
moment("20120620", "YYYYMMDD").fromNow(); // 8 年前
moment().startOf('day').fromNow();        // 15 小時前
moment().endOf('day').fromNow();          // 9 小時內
moment().startOf('hour').fromNow();       // 1 小時前

假設設定locale沒有變化，可能是載入的library不正確，需要使用moment-with-locales.js才有支援設定locale，如果載入的是moment.js則不支援locale設定。

可以使用console.log來查驗locale設定是否生效

console.log(moment.locale()); // en
moment.locale('zh-tw');
console.log(moment.locale()); // zh-tw

關於時區的部分, 預設都是當地的時區, 如果想要取得utc+0的時區可以如下使用

moment().format();     // 2020-02-26T18:35:24+08:00
moment.utc().format(); // 2020-02-26T10:35:24+00:00

想要取得不同時區的時間則可以用utcOffset功能來達到, 假設想取得美國東部時間(utc-5)如下使用

moment().utcOffset("-05:00").format();  //2020-02-26T02:58:33-05:00

moment-with-locales.js 不支援直接設定時區的方式，像是設定 ‘America/Los_Angeles’，此方式需要使用moment-timezone才有支援。

moment library還有許多便利有用的功能，詳情可上 Moment js 官方網站查詢哦。

以上為本次的Javascript Moment.js library分享。更多教學，請務必訂閱訂閱歐斯瑞電子報，以及追蹤我們的臉書粉絲團喔！

技術應用

Javascript Moment.js library介紹