date-fnsで日時をフォーマットしたり、パースする #JavaScript

Javascriptで日付操作をするライブラリとして、date-fnsを重用しています。
これまではmoment.jsやdayjsなどが使われていたみたいですが
momentは開発が止まっていたり、date-fnsの方が関数型で個人的に読みやすいので
今関わっている案件でもmoment => date-fnsに書き換える作業などを行なっています。

という事で今回は、date-fnsでよく使っている操作を紹介したいと思います。

フォーマット

import { format } from 'date-fns' 
import ja from 'date-fns/locale/ja'

console.log(new Date())

// Dateオブジェクト => yyyy/MM/dd
format(new Date(), 'yyyy/MM/dd')

// Dateオブジェクト => yyyy/MM/dd HH:mm
format(new Date(), 'yyyy/MM/dd HH:mm')

// Dateオブジェクト => yyyy年MM月dd日
format(new Date(), 'yyyy年MM月dd日', { locale: ja })

// Dateオブジェクト => yyyy年MM月dd日(曜日)
format(new Date(), 'yyyy年MM月dd日(eee)', { locale: ja })

パース

import { parse, parseISO } from 'date-fns' 
import ja from 'date-fns/locale/ja'

// yyyy/MM/dd => Date
parse('2021/08/21', 'yyyy/MM/dd', new Date())

// yyyy年MM月dd日 => Date
parse('2021年08月21日', 'yyyy年MM月dd日', new Date(), { locale: ja })

// ISO8601 => Date
parse('2021-08-21T09:00:00', 'yyyy-MM-ddTHH:mm:ss', new Date())
// または、これでも良い
parseISO('2021-08-21T09:00:00')

パースとフォーマットを同時にやる

import { format, parse, parseISO } from 'date-fns' 
import ja from 'date-fns/locale/ja'

// yyyy/MM/dd => yyyy年MM月dd日
format(
  parse('2021/08/21', 'yyyy/MM/dd', new Date()),
  'yyyy年MM月dd日',
  { locale: ja }
)

// ISO8601 => yyyy年MM月dd日
format(
  parseISO('2021-08-21T09:00:00'),
  'yyyy年MM月dd日',
  { locale: ja }
)