Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

今日は、JavaScript で日付を扱うのに役立つライブラリ Day.js を皆さんにお勧めします。JavaScript で日付を扱うのは難しすぎるからです。ビジネス開発を行う際に全く使えず、様々な機能を自らカプセル化する必要があります。

day.js を使用する理由

まず、day.js を使用すると、JavaScript で日付と時刻をより簡単に処理できるようになります。
JavaScript で時間を処理するライブラリは Moment など数多く耳にしたことがあるかと思いますが、2021 年現在、日付処理ツールとしては扱いにくいため、moment.js の使用は実際には推奨されていません。day.js は、よりモダンで軽量、拡張しやすいライブラリです。

モーメント

サイズを見るにはここをクリック

デイ.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 時間前

以下は出力テーブルです

範囲サンプル出力
0~44秒s数秒前
45~89秒メートル1分前
90秒から44分んん2分前...44分前
45~89分h 1時間前
90分~21時間はあ2時間前 ... 21時間前
22~35時間d 1日前
36時間から25日間dd 2日前 ... 25日前
26~45日1か月前
46日から10か月MM 2か月前 ... 10か月前
11~17ヶ月ええ1年前
18ヶ月以上ええ2年前...20年前

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSの日付処理機能についての簡単な説明
  • Moment.js は見逃せない素晴らしい JavaScript 日付処理ライブラリです。
  • 5 つのベスト JavaScript データ処理ライブラリ
  • JavaScript で先週と先月の日付を表示する方法
  • 日付処理jsライブラリ(ミニ版) - 自作jsライブラリのまとめ
  • 自分で整理したJavaScriptの日付処理関数
  • js での一般的な日付形式の処理、カレンダーのレンダリング、カウントダウン機能の詳細な説明
  • JavaScript 日付処理関数、パフォーマンス最適化バッチ処理

<<:  MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

>>:  Linux で gdb を使用してコア ファイルをデバッグする方法

推薦する

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

Ubuntu 18.04 Server に静的 IP を設定する方法

1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

カタツムリ映画システムのDocker展開の詳細なプロセス分析

環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

React Native の基本原則の深い理解 (Bridge of React Native)

この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...

MySQL に大量のデータを挿入する 4 つの方法の例

序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

Tomcat でサーブレット URL パターンを構成する際の問題の詳細な説明

tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...

MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...

MySQL操作テーブルでよく使われるSQLのまとめ

1. テーブル内のフィールドの種類を表示する テーブル名を記述する desc テーブル名 2. テー...

Vue カスタム オプション時間カレンダー コンポーネント

この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコード...