今日は、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 を使用してコア ファイルをデバッグする方法
システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...
この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...
現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...
2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...
証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...
コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...
前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....
この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...
docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...
Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...