⏰

date-fns 使い方あれこれ

2021/03/06に公開

JavaScript

日付操作について。
ReactやVueでアプリケーション作るのがデファクト・スタンダードなここ最近。日付操作は罠が多いので自作で頑張るよりは素直にライブラリ使った方が開発に専念できると思っているのでまとめ。

getDate, getMonth, getYear

現在の日、月、年の取得
1月は0を返すところくらいかな。

import { getDate, getMonth, getYear } from 'date-fns'

const date = new Date(2021, 0, 1)
console.log(date)
-> Fri Jan 01 2021 00:00:00 GMT+0900 (日本標準時)

console.log(getDate(date))
-> 1

console.log(getMonth(date))
-> 0

console.log(getYear(date))
-> 2021

format

現在の日時。
y,M,d,H,m,s いろんな指定があり、大文字、小文字でも挙動が異なるがだいたいはここを抑えておけばいいかも。

import { format } from 'date-fns'

console.log(format(new Date(), 'yyyy-MM-dd'))
-> 2021-03-05

console.log(format(new Date(), 'yyyy-MM-dd HH:mm:ss'))
-> 2021-03-05 22:51:16

その他はこちら

加算

対象となる日付に対して、加算したい（年数、月数、週数、日数）を渡す感じですね。
直感的で説明もいらないですね。

年: addYears

import { addYears } from 'date-fns'

// 1年後
console.log(addYears(new Date(2021, 0, 1), 1))
-> Sat Jan 01 2022 00:00:00 GMT+0900 (日本標準時)

// 3年後
console.log(addYears(new Date(2021, 0, 1), 3))
-> Mon Jan 01 2024 00:00:00 GMT+0900 (日本標準時)

月: addMonths

import { addMonths } from 'date-fns'

// 1ヶ月後
console.log(addMonths(new Date(2021, 0, 1), 1))
-> Mon Feb 01 2021 00:00:00 GMT+0900 (日本標準時)

// 3ヶ月後
console.log(addMonths(new Date(2021, 0, 1), 3))
-> Thu Apr 01 2021 00:00:00 GMT+0900 (日本標準時)

週: addWeeks

import { addWeeks } from 'date-fns'

// 1週間後
console.log(addWeeks(new Date(2021, 0, 1), 1))
-> Fri Jan 08 2021 00:00:00 GMT+0900 (日本標準時)

// 3週間後
console.log(addWeeks(new Date(2021, 0, 1), 3))
-> Mon Feb 08 2021 00:00:00 GMT+0900 (日本標準時)

日: addDays

import { addDays } from 'date-fns'

// 1日後
console.log(addDays(new Date(2021, 0, 1), 1))
-> Sat Jan 02 2021 00:00:00 GMT+0900 (日本標準時)

// 10日後
console.log(addDays(new Date(2021, 0, 1), 10))
-> Mon Jan 11 2021 00:00:00 GMT+0900 (日本標準時)

減算

対象となる日付に対して、減算したい（年数、月数、週数、日数）を渡す感じですね。
直感的で説明もいらないですね。

年: subYears

import { subYears } from 'date-fns'

// 1年前
console.log(subYears(new Date(2021, 0, 1), 1))
-> Wed Jan 01 2020 00:00:00 GMT+0900 (日本標準時)

// 3年前
console.log(subYears(new Date(2021, 0, 1), 3))
-> Mon Jan 01 2018 00:00:00 GMT+0900 (日本標準時)

月: subMonths

import { subMonths } from 'date-fns'

// 1ヶ月前
console.log(subMonths(new Date(2021, 0, 1), 1))
-> Tue Dec 01 2020 00:00:00 GMT+0900 (日本標準時)

// 3ヶ月前
console.log(subMonths(new Date(2021, 0, 1), 3))
-> Thu Oct 01 2020 00:00:00 GMT+0900 (日本標準時)

週: subWeeks

import { subWeeks } from 'date-fns'

// 1週間前
console.log(subWeeks(new Date(2021, 0, 1), 1))
->Fri Dec 25 2020 00:00:00 GMT+0900 (日本標準時)

// 3週間前
console.log(subWeeks(new Date(2021, 0, 1), 3))
-> Fri Dec 11 2020 00:00:00 GMT+0900 (日本標準時)

日: subDays

import { subDays } from 'date-fns'

// 1日前
console.log(subDays(new Date(2021, 0, 1), 1))
-> Thu Dec 31 2020 00:00:00 GMT+0900 (日本標準時)

// 10日前
console.log(subDays(new Date(2021, 0, 1), 10))
-> Tue Dec 22 2020 00:00:00 GMT+0900 (日本標準時)

計算

日付と日付を比較して経過日数、日時を見る。
割とよくやる Date.now() のタイムスタンプの形式に揃えた上で計算したりしますよね。

執筆中