TypeScriptの日付ツールです。date-fns 日付ツールの使い方

** date-fns は "small but complete" 日付ツールライブラリです。壁を登らなければ、公式のドキュメントを見ることはできないし、中国にはほとんどドキュメントがない。以下の概要は、私が最近使用した開発プロジェクトです。使い方は、angualr5.0環境で使用しています。typescriptを使用します。
**

以下は、機能の簡単な説明ですので、本文をご覧ください（目次がありますので、表は描かずに置いておきます）。 <テーブル 機能名 機能名 isToday() 入力された日付が今日かどうかを判定する isYesterday() 入力された日付が昨日かどうかを判定する isTomorrow() 入力された日付が次のとおりかどうかを判定します。 フォーマット() 日付の書式設定 addDays() 現在の日付の次の日付を取得する addHours() 現在時刻からn時間後の時点を取得する addMinutes() 現在時刻からn分後の時刻を取得する addMonths() 当月からnヶ月後の月を取得する subDays() 現在時刻からn日前の時刻を取得する subHours() 現在時刻からn時間前の時刻を取得する subMinutes() 現在時刻のn分前の時刻を取得する subMonths() 現在時刻からnヶ月前の時刻を取得する differenceInYears() 2つの時刻が異なる年を取得する differenceInWeeks() 2つの時刻の差を週数で取得する differenceInDays() 2つの時刻の差を日数で取得する differenceInHours() 2つの時刻の差を何時間か取得する differenceInMinutes() 2つの時刻の差を分単位で取得する

インストール

npm install --save date-fns

angualr5.0プロジェクトでは、module.tsファイルではなく、使うときにだけ導入すればいいのです。必要な関数は持ってきてください。

import { isToday, format } from 'date-fns';

By looking at the date-fns ts file:` function isToday (date: Date | string | number ): boolean namespace isToday {}`

1. isToday()：渡された日付が今日かどうか判断する

const day = new Date();
console.log(isToday(day)); // The result is: true

この関数は、日付、文字列、数値の引数を取ることがわかります。そして、boolean型を返します。
例として

 console.log(isToday("2019-01-01T06:35:00.000Z")); //result false

また、文字列を渡すと動作することを確認します。

function isYesterday ( date: Date | string | number ): boolean namespace isYesterday {}

つまり、今日という判断がある以上、昨日か明日かという判断はあるのか、答えはイエスです

2. isYesterday()：昨日かどうかを判定する

date-fns ts ファイルを見ることによって。

 	const date = new Date();
    console.log(isYesterday(date)); //result false
    console.log(isYesterday("2019-01-02T06:35:00.000Z")); //result true

まだ、日付、文字列、数値のパラメータを渡すことができます。ブール値を返します。
一例です。

 function format (
    date: Date | string | number,
    format?: string,
    options?: {
      locale?: Object
    }
  ): string
  namespace format {}

3. isTomorrow() は、明日かどうかを判定します。これは、isToday()、isYesterday()と同じなので、説明は省きます。

日付の書式設定は、jsにとって常にちょっとした問題です。date-fnsでは、それは単純な問題です。es5ではDateのプロトタイプを変更したりする必要はありません。

4. format()。日付関数をフォーマットする

	 const date = new Date();
     console.log(format(date, 'HH:mm')); // 17:05
     console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); // 2019-01-03 17:26:33
     console.log(format(date, 'YYYY-MM-DD')); //2019-01-03 
    	// When not passing the second parameter.
     console.log(format(date));//2019-01-03T17:27:27.102+08:00

この関数は3つの引数を取り、最初の引数は必須で日付、文字列、数値のいずれかを指定し、2番目の書式は日付の書式を指定するオプションである。3番目の引数は現時点では使用されていないため、オプションとなります

 function addDays (
    date: Date | string | number,
    amount: number
  ): Date

日付の書式の問題は解決しましたが、次は今から数日後の日付、数日前の日付、来週の日付などを取得する場合です。

5. addDays()。n日目以降の日付を取得します。

	 let date = new Date(); //2019-01-03
    console.log(format( addDays(date, 1), 'YYYY-MM-DD HH:mm:ss')); // 2019-01-04 17:46:30
    // Here, I've applied format to the outside of the function for ease of reading.
     console.log(format( addDays(date, 2), 'YYYY-MM-DD')); // 2019-01-05

この関数は2つの引数を取ります。1つ目は日付オブジェクト、2つ目はnumber型の数値です。1を渡すと明日の日付が、2を渡すと明後日の日付が、といった具合になります。結果は日付オブジェクト

 function subDays (
    date: Date | string | number,
    amount: number
  ): Date

日付の後がある場合は、1時間後や1分後があるので、細かい説明は省きます。使い方も同じです。ここでは関数名のみ記載

6. addHours()。現在の時間の次の時間を取得します（例：現在5:00、7:00の時間を取得）。

7.addMinutes()。現在の分からn分後の時間を取得する

8.addMonths()：現在の月からnヶ月後の月を取得します。

9.subDays(): 現在の日付の n 日前の日付を取得します。

 	const date = new Date();
    console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));//2019-01-04 11:03:33
    console.log(format( subDays(date, 2), 'YYYY-MM-DD HH:mm:ss')); //2019-01-02 11:03:33

この関数は2つの引数をとり、最初の引数は日付、文字列、数値で、最初の引数は (1,2) のような数値型である。Date オブジェクトを返します。

function differenceInDays (
    dateLeft: Date | string | number,
    dateRight: Date | string | number
  ): number

後の時刻を求めるのと同様に、n時間n分前の時刻を求める方法があります。

10: subHours()。現在時刻から n 時間前の時刻を取得する

11: subMinutes()。現在時刻から n 分前の時刻を取得する

12: subMonths()：現在の月の n ヶ月前の時刻を取得します。

それはさておき、時差を求める方法をいくつか紹介します。これもプロジェクトではよくあることです。

13: differenceInDays()。2 つの時刻の差の日数を取得します。

  const time = '2017-01-29 11:03:33';
    const date = new Date();
    console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));
    console.log(differenceInCalendarDays(date, time));
    console.log(differenceInDays(date, time)); //705

2つの引数、前の時間のためのdateLeftと後の時間のためのdateRightを渡します。戻り値: 数値型

 function startOfDay (
    date: Date | string | number
  ): Date

注：ここで、differenceInCalendarDays()という別の関数があります。.tsファイルでは、この2つの違いはわかりません。文字通り、カレンダーの日付だけである。他に違いがあるかどうかについては、後ほど実際のアプリケーションで探ってみることにします。また、differenceInDays()のアプリケーションでは、差分が-0になっていますが、js printでは console.log(-0 === 0); returnはtrueになります。Baiduが教えてくれます。 0と-0の差を判断するjs

日数の差を求める関数があるのだから、時間や分の差を求める方法もある。使い方は同じなので、例は示さず、メソッドだけを紹介します。

14:differenceInHours();2つの時刻の時差を取得します。

15：differenceInMinutes()。2 つの時刻の差分(分)を取得します。

16: differenceInMonths()。2つの時刻の差を月単位で取得

17: differenceInWeeks()：2つの時刻の差の週数を取得します。

18：differenceInYears()。2つの時刻の差を何年分かを取得する

19: startOfDay()：渡された日の始まりのDateオブジェクトを返す（1日の始まりの時間）。

const today = new Date();
 const startDate = startOfDay(today); /Mon Jan 14 2019 00:00:00 GMT+0800 (CST)

 function endOfDay (
    date: Date | string | number
  ): Date

パラメータを渡します。型はDate, string, numberです。Dateオブジェクトを返します。

	const today = new Date();
	const endDate = endOfDay(today);
    console.log('endDate', endDate);// Mon Jan 14 2019 23:59:59 GMT+0800 (CST)

function startOfMonth (
    date: Date | string | number
  ): Date

20: endOfDay(): 入力された日付の日の終わりを取得する(startOfDay に対応)

	const today = new Date();
	 const startMonth = startOfMonth(today); //Tue Jan 01 2019 00:00:00 GMT+0800 (CST)
    const aa = format(startMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-01 00:00:00

 function endOfMonth (
    date: Date | string | number
  ): Date

パラメータを渡します。型はDate, string, numberです。Dateオブジェクトを返します。

	const today = new Date();
	 const endMonth = endOfMonth(today); //Thu Jan 31 2019 23:59:59 GMT+0800 (CST)
    const aa = format(endMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-31 23:59:59
    console.log('endMonth', endMonth);

21: startOfMonth()：月の初日を取得します。

function getDate (
    date: Date | string | number
  ): number

パラメータを渡します。型はDate, string, numberです。Dateオブジェクトを返します。

 console.log(getDate('2019-01-15 00:00:00')); // 15

 function getDay (
    date: Date | string | number
  ): number

22: endOfMonth(): その月の最終日を取得

console.log(getDay('2019-01-15 00:00:00')); // 2

  function getMonth (
    date: Date | string | number
  ): number

パラメータを渡します。パラメータには、Date、string、numberのいずれかの型を指定できます。Dateオブジェクトを返します。

	const day =new Date();
   console.log(getMonth(day)); // 0

その他、startOfHour()、startOfMinute()、startOfToday()などのメソッドは対象外です。これらはすべて同じように動作します。
ここでgetDay()メソッドを書いていないことに気がつきました。まずはこの部分を書いてみましょう

23: getDate()。渡された日付を取得します。

 function getMinutes (
    date: Date | string | number
  ): number

日付、文字列、数値のパラメータを渡します。数値型を返す

	const day =new Date(); //15:09
   console.log(getMinutes(day)); // 9

 function getHours (
    date: Date | string | number
  ): number

24: getDay()。入力された日付の曜日を取得する

const day = new Date();//15:22
console.log(getHours(day)); // 15

 function getISOWeek (
    date: Date | string | number
  ): number

日付、文字列、数値のパラメータを渡します。数値型を返す

    console.log(getISOWeek('2019-01-10 00:00:00')); //2

 function isEqual (
    dateLeft: Date | string | number,
    dateRight: Date | string | number
  ): boolean

25: getMonth()。で渡された時刻の月を返します。

   console.log('eee', isEqual('January 2, 2019', this.day)); //false
   

日付、文字列、数値のパラメータを渡します。数値型を返す

 function max (
    ... . dates: (Date | string | number)[]
  ): Date

この関数は、0から始まる数字、つまり0は1月であることを返します。これは、jsのネイティブなDateオブジェクトのgetMonth()と同じです。

26: getMinutes()。受信時刻の分数を返す

const day = new Date();
  console.log(max(subDays(day, 1), day, subDays(day, 2))); 
  //Mon Jan 28 2019 15:23:52 GMT+0800 (CST)
  

 function min (
    ... . dates: (Date | string | number)[]
  ): Date

日付、文字列、数値のパラメータを渡します。数値型を返す

const day = new Date();
 console.log(min(subDays(day, 1), day, subDays(day, 2)));
 //Sat Jan 26 2019 15:26:49 GMT+0800 (CST)

27:getHours()：受信時刻の時間数を返します。

import {format } from 'date-fns'
import { parseISO } from "date-fns/fp";
let date = '2020-07-29T16:00:00.000+0000';
format(parseISO(date), "yyyy-MM-dd HH:mm:ss"); //Use parseISO and you're done

日付、文字列、数値のパラメータを渡します。数値型を返す

const day = new Date();//15:22
console.log(getHours(day)); // 15

28: getISOWeek()。時刻が経過した月の週を返します。

 function getISOWeek (
    date: Date | string | number
  ): number

日付、文字列、数値のパラメータを渡します。数値型を返す

    console.log(getISOWeek('2019-01-10 00:00:00')); //2

29: isEqual()。渡された時間が等しいかどうかを判定する

 function isEqual (
    dateLeft: Date | string | number,
    dateRight: Date | string | number
  ): boolean

2つのパラメータ（日付、文字列、数値）を渡します。Boolean型を返す。

   console.log('eee', isEqual('January 2, 2019', this.day)); //false
   

この関数は少しオーバーで、同じフォーマットでなければならない2つの引数を渡します。例えば "YYYY-MM-DD"、両方の引数がそのフォーマットでなければならず、そうでなければ false が返されます。この関数は、同じ時刻のフォーマットで2つの時刻を比較すると解釈することもできます。

30:max: 時間配列の最大値を取得する

最大値と最小値は、時刻が遅いほど大きくなります。その逆は小さくなります

 function max (
    ... . dates: (Date | string | number)[]
  ): Date

この関数は、1つの引数、...dates.を受け取ります。(Date | string | number)[] というスプレッド拡大演算子と呼ばれる引数を取り、残りの引数である反対側の引数を持つ。この演算子の利点は、引数がDate | string | numberである限り、いくつでも渡せることです
例として、再び subDays() を借りて、次のようにしてみましょう。

const day = new Date();
  console.log(max(subDays(day, 1), day, subDays(day, 2))); 
  //Mon Jan 28 2019 15:23:52 GMT+0800 (CST)
  

31: min(): 時間配列の最小値を取得します

 function min (
    ... . dates: (Date | string | number)[]
  ): Date

max関数と同じ

const day = new Date();
 console.log(min(subDays(day, 1), day, subDays(day, 2)));
 //Sat Jan 26 2019 15:26:49 GMT+0800 (CST)

32: 現在のバージョンでは、文字列型はサポートされていません。

formatの時は、stringを渡すことができたのですが、最近、使ってみると、できないことがわかりました。しかし、バックエンドから "2020-07-29T16:00:00.000+0000" というフォーマットでデータが送られてくることがあるのです。では、どうすればいいのでしょう。
また、公式の解決策も示されています。
それは

import {format } from 'date-fns'
import { parseISO } from "date-fns/fp";
let date = '2020-07-29T16:00:00.000+0000';
format(parseISO(date), "yyyy-MM-dd HH:mm:ss"); //Use parseISO and you're done

続きはこちら...