Moment.js 筆記

把一些常用到的操作給記錄下來。

簡述

底下介紹的所有範例可以到 Codepen 上參考。

add（加時間）

小陷阱：注意這是用 mutable 的方式來改資料，所以請避免直接對儲存 moment 的 state 使用

let A = moment('2020-01-01')
let B = moment('2020-01-01')
let C = moment('2020-01-01')
console.log(A.add(1, 'days').format('YYYY/MM/DD')) // 2020/01/02
console.log(A.format('YYYY/MM/DD')) // 2020/01/02 (mutable changed)
console.log(B.add(1, 'months').format('YYYY/MM/DD')) // 2020/02/01
console.log(C.format('LTS')) // 12:00:00 AM
console.log(C.add(5, 'hours').format('LTS')) // 5:00:00 AM

subtract（減時間）

小陷阱：注意這是用 mutable 的方式來改資料，所以請避免直接對儲存 moment 的 state 使用

let A = moment('2020-01-10')
let B = moment('2020-01-10')
let C = moment('2020-01-10')
console.log(A.subtract(7, 'days').format('YYYY/MM/DD')) // 2020/01/03
console.log(A.format('YYYY/MM/DD')) // 2020/01/09 (mutable changed)
console.log(B.subtract(1, 'months').format('YYYY/MM/DD')) // 2020/02/01
console.log(C.format('LTS')) // 12:00:00 AM
console.log(C.subtract(5, 'hours').format('LTS')) // 7:00:00 PM

diff（比較天數）

let A = moment('2020-01-01')
let B = moment('2020-01-02')
console.log(A.diff(B, 'days')) // -1
console.log(B.diff(A, 'days')) // 1

endOf / startOf

let A = moment('2020-01-01')
console.log(A.endOf('day').format('LTS')) // 11:59:59 PM
console.log(A.startOf('day').format('LTS')) // 12:00:00 AM

確認格式是否正確

假設要確認格式是否為 13/09/2022(DD/MM/YYYY)：

moment('13/09/2022', 'DD/MM/YYYY', true).isValid() // true
moment('01/13/2022', 'DD/MM/YYYY', true).isValid() // false
moment('123', 'DD/MM/YYYY', true).isValid() // false
moment('abc', 'DD/MM/YYYY', true).isValid() // false

實際例子（Antd）

StartDate >= EndDate：

const selectedEndDate = moment('2022-09-02')

<DatePicker
  disabledDate={(currentDate: moment.Moment) =>
    currentDate.startOf('day').diff(selectedEndDate.startOf('day'), 'days') > 0}
/>

EndDate <= StartDate：

const selectedStartDate = moment('2022-09-02')

<DatePicker
  disabledDate={(currentDate: moment.Moment) =>
    currentDate.startOf('day').diff(selectedStartDate.startOf('day'), 'days') < 0}
/>

這邊建議比較時**最好把 A 跟 B 都加上 startOf('day')**，確保兩者的時間（時/分/秒）是分秒不差的，否則有可能會出現少一天 or 多一天的問題。