今日は、JavaScript で日付を扱うのに役立つライブラリ Day.js を皆さんにお勧めします。JavaScript で日付を扱うのは難しすぎるからです。ビジネス開発を行う際に全く使えず、様々な機能を自らカプセル化する必要があります。 day.js を使用する理由まず、day.js を使用すると、JavaScript で日付と時刻をより簡単に処理できるようになります。 モーメントサイズを見るにはここをクリック デイ.jsサイズを見るにはここをクリック TreeShaking が使えて、プラグインで拡張できるので、非常に軽量です。必要に応じてプラグインを導入できるので、最終的には必要なものだけを導入します。 day.js がなければどうなるでしょうか?ネイティブJavaScriptでは、現在の日付を次のように取得する必要があります。 const today = 新しい Date(); const dd = String(today.getDate()).padStart(2, '0'); // 日 const mm = String(today.getMonth() + 1).padStart(2, '0'); // 月 const yyyy = today.getFullYear(); // 年 const curDate = `${yyyy}-${mm}-${dd}` コンソールログ(現在の日付) // 出力: 2021-09-17 day.js では、これだけが必要ですが、もちろん、それ以上の多くの機能もサポートしています。 「dayjs」からdayjsをインポートします。 const curDate = dayjs().format('YYYY-MM-DD'); コンソールログ(現在の日付) // 出力: 2021-09-17 Day.js の例ここで、ネイティブ API よりもシンプルで読みやすい、実用的で興味深い例をいくつか見てみましょう。 1. 2つの日付間の日数を取得するドキュメントを見る 「dayjs」からdayjsをインポートします。 // 2 番目のパラメーターは 'day' として指定されており、粒度が day であることを意味します。dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day"); // 出力: 15 2. 日付が有効かどうかを確認するドキュメントを見る 「dayjs」からdayjsをインポートします。 dayjs("20").isValid(); // 出力: false dayjs("2021-09-17").isValid(); // 出力: true 3. 入力した日付の月の日数を取得するドキュメントを見る 「dayjs」からdayjsをインポートします。 dayjs("2021-09-13").daysInMonth() // 出力: 30 4. 日、月、年、時間、分、秒を追加しますドキュメントを見る 「dayjs」からdayjsをインポートします。 dayjs("2021-09-17 08:10:00").add(20, "分").format('YYYY-MM-DD HH:mm:ss') // 出力: 2021-09-17 08:30:00 5. 日、月、年、時間、分、秒を減算するドキュメントを見る 「dayjs」からdayjsをインポートします。 dayjs("2021-09-17 08:10:00").subtract(20, "分").format('YYYY-MM-DD HH:mm:ss') // 出力: 2021-09-17 07:50:00 プラグインを使用して機能を拡張する1. 相対時間ドキュメントを見る 指定した時刻から現在までの時間差を取得します。 「dayjs」からdayjsをインポートします。 「dayjs/plugin/relativeTime」から relativeTime をインポートします。 dayjs.extend(相対時間); dayjs("2021-09-16 13:28:55").fromNow(); // 出力: 9 時間前 以下は出力テーブルです
2. 週番号ドキュメントを見る 指定された日付の年内の週番号を取得します 「dayjs」からdayjsをインポートします。 「dayjs/plugin/weekOfYear」から weekOfYear をインポートします。 dayjs.extend(weekOfYear); dayjs("2021-09-13 14:00:00").week(); // 出力: 38 3. 同じかそれ以降ドキュメントを見る 日付が指定された日付以上であるかどうかを確認します 「dayjs」からdayjsをインポートします。 「dayjs/plugin/isSameOrAfter」からisSameOrAfterをインポートします。 dayjs.extend(isSameOrAfter); dayjs("2021-09-17").isSameOrAfter("2021-09-16"); // 出力: true 4. 最小最大ドキュメントを見る 配列内の最大または最小の日付を取得する 「dayjs」からdayjsをインポートします。 「dayjs/plugin/minMax」からminMaxをインポートします。 dayjs.extend(最小最大) 定数maxDate = dayjs.max([ dayjs("2021-09-13"), dayjs("2021-09-16"), 2021-09-20 の投稿 ]) 定数minDate = dayjs.min([ dayjs("2021-09-13"), dayjs("2021-09-16"), 2021-09-20 の投稿 ]) maxDate.format('YYYY-MM-DD HH:mm:ss') // 出力: 2021-09-20 00:00:00 minDate.format('YYYY-MM-DD HH:mm:ss') // 出力: 2021-09-13 00:00:00 5. 間にあるドキュメントを見る 指定された日付が指定された日付範囲内にあるかどうかを確認します 「dayjs」からdayjsをインポートします。 「dayjs/plugin/isBetween」からisBetweenをインポートします。 dayjs.extend(isBetween); // 比較の粒度として日を使用します dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); // 出力: true // 比較の粒度として年を使用します dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); // 出力: false Day.js をベースにした JavaScript でのよりエレガントな日付処理に関するこの記事はこれで終わりです。Day.js を使用した日付処理の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析
>>: Linux で gdb を使用してコア ファイルをデバッグする方法
注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...
1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...
mysql クエリ制御ステートメントフィールド重複排除 **キーワード: 明確** 構文: テーブル...
ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...
目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...
この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...
1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...
序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...
インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...
大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...
最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...
分割線はウェブページでよく使われるデザインです。例えば、Zhihuのその他の回答をご覧ください。 こ...
Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...