tags: 鐵人賽 React javascript nodejs

鐵人賽第24天，今天我們要來介紹一個時間的套件。

• 所有程式，時間充足的話我們都寫得出來；不過，踏入社會，有了責任，如何成為時間管理大師，成了你我必學的課題。
• 好加在，好用的工具一直都存在著，讓我們可以擠出比別人多一點時間做自己開心的事！～爽！
  

moment.js

• 開發過程中，不免需要做日期的運算，單純的一天兩天加減還算簡單，但若到跨月，你得算是大月小月。但若得估算每三年每隔四個月的第二個星期的第三天，你可能會覺得先關機下班還比較實際XD。

• 別怕別怕，其實認真寫都寫得出來，不過，我倒是要推薦一個好用的套件，而且相當好上手，安裝後立馬可使用~moment.js。

安裝

• npm install moments.js --save

初始化

• 開啟你的node，我們來感受一下他的威力
• 底下這段程式，提供大家在node快速驗證使用，因為是common JS，故我們使用require。

let moment = require("moment");

• 實際上在React開發，直接使用import即可

import moment from "moment" //<-- 一般React開發

日期格式化

format基本用法

• 先來一碟小菜來嚐嚐，建立好一個moment物件後，你可以先用他的函式format()來取得你要的日期
• format()字串內支援的字母Y、M、D及d...等，代表:

• Y: year
• M: month
• D: date
• d: weekday，從0:Sunday, 1:Monday...~ 6:Saturday，共七天

> moment().format()                       // 2020-09-27T14:24:46+08:00
> moment.format("YYYY:MM:DD");              // 2020:09:27
> moment.format('dddd');                    // Sunday
> moment.format("MMM Do YY");               // Sep 27th 20
> moment.format('YYYY [escaped] YYYY');     // 2020 escaped 2020

連續字母代表不同的意義，例如:

> moment("2020-09-26").format("Y-M-D") //'2020-9-26'
> moment("2020-09-26").format("YY-MM-DD") //'20-09-26'
> moment("2020-09-26").format("YYY-MMM-DDD") //'202020-Sep-270'
> moment("2020-09-26").format("YYYY-MMMM-DDDD") //'2020-September-270'

相對日期時間估算

fromNow()，就是某個時間與此刻時間的差距

> moment("20111031", "YYYYMMDD").fromNow(); // 9 years ago
> moment("20120620", "YYYYMMDD").fromNow(); // 8 years ago

startOf及endOf

• 意思是我從現在這個時間點，以某個單位來看的起始(或結束)的時間

>  moment().startOf('hour') // Moment<2020-09-27T14:00:00+08:00>
> moment().endOf('hour')    // Moment<2020-09-27T14:59:59+08:00>

兩者搭配，可以輕鬆的算出時間差異

> moment().startOf('day').fromNow();        // 15 hours ago
> moment().endOf('day').fromNow();          // in 9 hours
> moment().startOf('hour').fromNow();       // 32 minutes ago

日期加減

• moment提供日期的加add及減subtract，相當直覺

add

> moment().add(2, 'days').calendar();  //'Tuesday at 2:43 PM'
> moment().add(4, 'days').calendar();  //'Thursday at 2:43 PM'
> moment().add(20, 'days').calendar(); //'10/17/2020'

substract

> moment().subtract(10, 'days').calendar(); //'09/17/2020'
> moment().subtract(6, 'days').calendar();  //'Last Monday at 2:44 PM'
> moment().subtract(3, 'days').calendar();  //'Last Thursday at 2:44 PM'
> moment().subtract(1, 'days').calendar();  //'Yesterday at 2:44 PM'

判斷驗證日期區間

isBetween: 日期是否介在 起始日期...結束日期之間

• 使用方式
  moment(“YourDate”).isBetween([StartDate], [EndDate])

`moment().isBetween("20200910", "20200930")`// true

isBefore, isAfter： 日期是否在A日期之前(或之後)

• 使用方式
  moment(“YourDate”).isBefore([ADate])
moment(“YourDate”).isAfter([ADate])

> moment().isBefore("20200930") //true
> moment().isAfter("20200930") //false

結論

• moment.js讓我們輕鬆的處理時間相關的議題，你不需要自己刻，就可以輕鬆解決時間運算的問題。
• moment.js讓你有更多的moment！！
• 鐵人賽第24天，倒數一週了，讓我們繼續堅持下去～Go GO Go
  

教學資源

• moment.js 官網