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

2022.06.17

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

項目バージョン
date-fns2.28.0
date-fns-tz1.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

参考サイト

Modern JavaScript Date Utility Library
date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
date-fns.org
date-fns
Modern JavaScript date utility library. Latest version: 2.29.1, last published: a month ago. Start using date-fns in your project by running `npm i date-fns`. T...
www.npmjs.com
date-fns-tz
Time zone support for date-fns v2 with the Intl API. Latest version: 1.3.6, last published: a month ago. Start using date-fns-tz in your project by running `npm...
www.npmjs.com

コメント

タイトルとURLをコピーしました