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

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 属性には以下が必要です。

コンポーネント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 を応援してください。

以下もご興味があるかもしれません:
  • Vue+element-ui はカスタム右クリックメニューメソッドの例を追加します
  • vue と要素に基づいてテスト ペーパー関連の関数を作成する (サンプル コード)
  • Vue の Elementui を使用してデフォルトを変更する最も速い方法について簡単に説明します。
  • vue+element_uiはファイルをアップロードし、追加のパラメータを渡します
  • vue3.0+vue-router+element-plusの初期練習
  • element-plus は vue3.x UI フレームワークです (element-ui 3.x バージョンを初めて体験しました)
  • Vue3+elementui plusでプロジェクトを作成する方法
  • Vue要素は行データを結合するテーブルを実現します
  • Vue.js フロントエンドフレームワークにおけるイベント処理の概要
  • Vue Element フロントエンドアプリケーション開発のための従来の JS 処理機能

<<:  Linux/Mac MySQL パスワードを忘れた場合のパスワード変更コマンドラインメソッド

>>:  Ubuntuのバックアップ方法(4種類)のまとめ

推薦する

MySqlは指定されたユーザーのデータベースビュークエリ権限を設定します

1. 新しいユーザーを作成します。 1. SQL ステートメントを実行して新しいものを作成します (...

マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...

CentOs7 64 ビット MySQL 5.6.40 ソースコードのインストール プロセス

1. インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [r...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

DockerでLinuxシェルコマンドを実行する方法

Docker でシェル コマンドを実行するには、コマンドの前に sh -c を追加する必要があります...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

nginx のインストールが完了した後に PHP を解析できない問題の解決方法

目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...

Linux gccコマンドの具体的な使い方

01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...