今日は、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 を使用してコア ファイルをデバッグする方法
OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...
これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...
序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...
<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...
tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...
1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...
1. テーブル内のフィールドの種類を表示する テーブル名を記述する desc テーブル名 2. テー...
この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコード...