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 を使用してコア ファイルをデバッグする方法

推薦する

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

JS はシンプルなカレンダー効果を実装します

この記事では、シンプルなカレンダー効果を実現するためのJSの具体的なコードを参考までに紹介します。具...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン(システムのシャットダウン、再起動、ログアウト) 3. フ...

SQL実装 LeetCode (176. 2番目に高い給与)

[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

TomcatのmaxPostSize属性を設定する際に注意する必要がある問題を解決する

必要:近い将来、大容量ファイルのアップロード機能を実装します。フロントエンドフレームワークのアップロ...

echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...

IOSデータベースアップグレードデータ移行の詳細な例

IOSデータベースアップグレードデータ移行の詳細な例まとめ:昔、データベースのバージョン アップグレ...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

CSS3で実装された天気アイコンのアニメーション効果

成果を達成する 実装コードhtml <div class="wrapper"...