vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要があることがよくあります。
時間と日付を処理するための軽量 JavaScript ライブラリの推奨: dayjs このプラグインを使用すると、一般的な日付を計算するのに非常に便利です 1. プロジェクトにdayjsをインストールします。コマンドは 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 を応援してください。
<<: Linux/Mac MySQL パスワードを忘れた場合のパスワード変更コマンドラインメソッド
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...
コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...
CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...
透明を含む5つの肌の色を変更するには50行のコードが必要です最初にコードをお渡ししますので、ご自身で...
1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...
序文この記事は主にMySQLの主キー0と主キー自己排除制約の関係を紹介し、皆さんの参考と学習のために...
目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...
2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...
CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...
これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...