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の方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

HTML リスト タグ dl、ul、ol の使用例

コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...

Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました

CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

フロントエンドHTMLスキン変更機能の実装コード

透明を含む5つの肌の色を変更するには50行のコードが必要です最初にコードをお渡ししますので、ご自身で...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

MySQL における主キーが 0 であることと主キーの自己選択制約の関係についての詳しい説明 (詳細)

序文この記事は主にMySQLの主キー0と主キー自己排除制約の関係を紹介し、皆さんの参考と学習のために...

jsとcssのブロッキング問題の詳細な分析

目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...

mysql5.7.18.zip インストール不要版設定チュートリアル(Windows)

これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...