14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

Javascriptで日付操作をするライブラリとして、date-fnsを重用しています。
これまではmoment.jsdayjsなどが使われていたみたいですが
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 }
)
14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?