date-fns,date-fns-tzの使い方
項目 | バージョン |
---|---|
date-fns | 2.28.0 |
date-fns-tz | 1.3.4 |
moment.jsがメンテナンスモードになってしまったため、npm trendsで代わりの日付を扱うライブラリを探していたら、date-fnsなるモジュールがあったので使い方調べてみました。
importします。
1 2 |
import {addDays, subDays} from 'date-fns' import {zonedTimeToUtc, utcToZonedTime, format, toDate} from 'date-fns-tz/esm' |
addDays
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {addDays} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(addDays(utcDate,3)) // 2018-09-04T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
subDays
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {subDays} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(addDays(utcDate,3)) // 2018-08-29T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
addYears
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {addYears} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(addYears(utcDate,3)) // 2021-09-01T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
subYears
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {subYears} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(subYears(utcDate,3)) // 2015-09-01T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
addMonths
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {addYears} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(addMonths(utcDate,3)) // 2018-12-01T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
subMonths
第一引数にDate、第二引数に数値を渡します。
1 2 3 4 5 6 |
import {subYears} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utcDate) // 2018-09-01T09:01:36.386Z console.log(subMonths(utcDate,3)) // 2018-06-01T09:01:36.386Z console.log(utcDate) // 2018-09-01T09:01:36.386Z |
isValid
日付の妥当性をチェックします。第一引数にanyを渡します。
1 2 3 4 5 6 |
import {isValid} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' const utcDate = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(isValid(utcDate)) // true console.log(isValid('2018-09-01 18:01:36.386')) // false 文字列の為false console.log(isValid(1488370835081)) // true ミリ秒指定 |
Dateオブジェクトを引数にすると正しく妥当性がチェックできないようです。
1 2 |
const bool = isValid(new Date('2022-02-29')) console.log(bool) // なぜかtrueになってしまう |
date-fnsは内部的にDateを使っているようなのでこのような挙動になるようです。
Dateは色々お菓子な動きをするので、あまりこのモジュールはお勧めじゃないかもしれないです。
differenceInDays
日付の差を求めます。第一引数 – 第二引数の差分が日数で返ります。
1 2 3 4 5 6 7 8 9 10 |
import {differenceInDays} from 'date-fns' import {zonedTimeToUtc} from 'date-fns-tz/esm' let utc1,utc2 utc1 = zonedTimeToUtc('2018-09-03T18:01:36.386Z', 'Asia/Tokyo') console.log(utc1) utc2 = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utc2) // 2 const diff = differenceInDays(utc1,utc2) console.log(diff) |
zonedTimeToUtc
第一引数で指定された時刻のUTC時刻を返します。
※末尾のZはUTC時刻を表します
1 2 3 4 5 6 |
import {zonedTimeToUtc} from 'date-fns-tz/esm' let utc utc = zonedTimeToUtc('2018-09-01T18:01:36.386', 'Asia/Tokyo') console.log(utc) // 2018-09-01T09:01:36.386Z utc = zonedTimeToUtc('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(utc) // 2018-09-01T18:01:36.386Z |
utcToZonedTime
第一引数で指定されたUTC時刻をタイムゾーンの時間に変換して返します。
※末尾のZはUTC時刻を表します
1 2 3 4 5 6 7 |
import {utcToZonedTime} from 'date-fns-tz/esm' let zonedtime zonedtime = utcToZonedTime('2018-09-01T18:01:36.386', 'Asia/Tokyo') console.log(zonedtime) // 2018-09-01T09:01:36.386Z zonedtime = utcToZonedTime('2018-09-01T18:01:36.386Z', 'Asia/Tokyo') console.log(zonedtime) // 2018-09-01T18:01:36.386Z |
isAfter
日付の比較をします。
1 2 3 4 5 |
import {isAfter} from 'date-fns' import {zonedTimeToUtc, utcToZonedTime, format, toDate} from 'date-fns-tz/esm' const utcDate1 = zonedTimeToUtc('2018-02-28T10:01:36.386Z', 'Asia/Tokyo') const utcDate2 = zonedTimeToUtc('2018-02-28T10:01:36.385Z', 'Asia/Tokyo') console.log(isAfter(utcDate1,utcDate2)) // true |
isBefore
日付の比較をします。
1 2 3 4 5 |
import {isBefore} from 'date-fns' import {zonedTimeToUtc, utcToZonedTime, format, toDate} from 'date-fns-tz/esm' const utcDate1 = zonedTimeToUtc('2018-02-28T10:01:36.386Z', 'Asia/Tokyo') const utcDate2 = zonedTimeToUtc('2018-02-28T10:01:36.385Z', 'Asia/Tokyo') console.log(isBefore(utcDate1,utcDate2)) // false |
参考サイト
https://www.npmjs.com/package/date-fns
https://www.npmjs.com/package/date-fns-tz

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格:少額短期保険募集人,FP3級