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 パスワードを忘れた場合のパスワード変更コマンドラインメソッド
1. 新しいユーザーを作成します。 1. SQL ステートメントを実行して新しいものを作成します (...
マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...
1. インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [r...
目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...
目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
Docker でシェル コマンドを実行するには、コマンドの前に sh -c を追加する必要があります...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...
目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...
01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...
この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...
Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...