今日は、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 />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...
1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...
この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...
目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...
この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...
1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...
目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...
一般的な演算子と JavaScript の演算子の概要カテゴリオペレーター算術演算子+、–、*、/、...
div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...