Dayjs を使用して Vue で一般的な日付を計算する方法

vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要があることがよくあります。毎週と毎月の締め切りを計算する XX日前/後の日付を計算しますタイムスタンプを日付 (YYYY-MM-DD) に変換します。月の日数を計算する日付からタイムスタンプ時間と日付を処理するための軽量 JavaScript ライブラリの推奨: dayjs このプラグインを使用すると、一般的な日付を計算するのに非常に便利です 1. プロジェクトにdayjsをインストールします。コマンドは`npm install dayjs --save`です。 2. main.jsに次の2行のコードを追加します。 'dayjs' から dayjs をインポートします。 Vue.prototype.dayjs をビルドします。 3. ページ上の必要な場所で直接使用する現在の日付またはタイムスタンプが変換されます。フォーマットの後にフォーマットするコンテンツが続きます。dayjs() は括弧内にパラメータを入れません。デフォルトは現在の日付です。タイムスタンプを入れて直接変換することもできます。 (注: Element コンポーネントの日付ピッカーを使用する場合、その value-format 属性には以下が必要です。

vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要があることがよくあります。

毎週と毎月の締め切りを計算する
XX日前/後の日付を計算します
タイムスタンプを日付 (YYYY-MM-DD) に変換します。
月の日数を計算する
日付からタイムスタンプ

時間と日付を処理するための軽量 JavaScript ライブラリの推奨: dayjs

このプラグインを使用すると、一般的な日付を計算するのに非常に便利です

1. プロジェクトにdayjsをインストールします。コマンドはnpm install dayjs --saveです。

2. main.jsに次の2行のコードを追加します。

'dayjs' から dayjs をインポートします。
Vue.prototype.dayjs をビルドします。

3. ページ上の必要な場所で直接使用する

現在の日付またはタイムスタンプが変換されます。フォーマットの後にフォーマットするコンテンツが続きます。**dayjs()** は括弧内にパラメータを入れません。デフォルトは現在の日付です。タイムスタンプを入れて直接変換することもできます。

(注: Element コンポーネントの日付ピッカーを使用する場合、その value-format 属性には以下が必要です。

コンポーネント	Dayjs (フォーマット)	要素（値の形式）
年	ええ	ああ
月	MM	MM
日	DD	dd
時間	HH	HH
ポイント	んん	んん
2番	ss	ss

年と日の表現が微妙に異なり、混同しやすいです。

this.dayjs().format("YYYY-MM-DD")
this.dayjs().format("YYYY-MM-DD HH:mm")
this.dayjs(1614787200000).format("YYYY-MM-DD HH:mm:ss")

2. 週/月/年の開始日と終了日を計算します。使用するメソッドはstartOf()とendOf()です。括弧には「週」、「月」、または「年」を指定できます。
(追記: フォーマットを追加すると、より直感的になります)

this.dayjs().startOf("週");
this.dayjs().endOf("week").format("YYYY-MM-DD");
this.dayjs().startOf("month").format("YYYY-MM-DD");
this.dayjs("2021-02-09").endOf("month").format("YYYY-MM-DD");

数日前や数日後などの日付を計算します。

フロント（マイナス）	後（追加）
減算(パラメータ1、パラメータ2)	追加(パラメータ1、パラメータ2)
パラメータ1	番号
パラメータ2	単位 (「週」、「月」、「年」)

this.dayjs().subtract(3,'day').format("YYYY-MM-DD")
this.dayjs().subtract(3,'month').format("YYYY-MM-DD")
this.dayjs().add(12,'day').format("YYYY-MM-DD")
this.dayjs('2021-03-12').add(45,'day').format("YYYY-MM-DD")

5. 月の日付を取得するには、dayInMonth() メソッドを使用します。

 this.dayjs().daysInMonth();
 2021-02-09 の月日を返します。
 2021-01 月の日付。

6. 通常の日付をタイムスタンプに変換する

this.dayjs().unix()
this.dayjs('2020-10-04').unix()

要約する

これで、Vue が Dayjs を使用して一般的な日付を計算する方法についての説明は終わりです。Vue が一般的な日付を計算する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません: