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

2022/6/17 node.js

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'

1 2	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

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

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

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

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

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

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 ミリ秒指定

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になってしまう

1 2	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)

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

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

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

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

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://date-fns.org/

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級