date-fns,date-fns-tzの使い方

date-fns,date-fns-tzの使い方

date-fns,date-fns-tzの使い方

項目	バージョン
date-fns	2.28.0
date-fns-tz	1.3.4

moment.jsがメンテナンスモードになってしまったため、npm trendsで代わりの日付を扱うライブラリを探していたら、date-fnsなるモジュールがあったので使い方調べてみました。

importします。

import {addDays, subDays} from 'date-fns'
import {zonedTimeToUtc, utcToZonedTime, format, toDate} from 'date-fns-tz/esm'

addDays

第一引数にDate、第二引数に数値を渡します。

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、第二引数に数値を渡します。

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、第二引数に数値を渡します。

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、第二引数に数値を渡します。

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、第二引数に数値を渡します。

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、第二引数に数値を渡します。

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を渡します。

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オブジェクトを引数にすると正しく妥当性がチェックできないようです。

const bool = isValid(new Date('2022-02-29'))
console.log(bool) // なぜかtrueになってしまう

date-fnsは内部的にDateを使っているようなのでこのような挙動になるようです。

Dateは色々お菓子な動きをするので、あまりこのモジュールはお勧めじゃないかもしれないです。

differenceInDays

日付の差を求めます。第一引数 – 第二引数の差分が日数で返ります。

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時刻を表します

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時刻を表します

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

日付の比較をします。

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

日付の比較をします。

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