JavaScriptの「Day.js」ライブラリで日付の比較を行う方法
JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を行いたかった。具体的には「開始日時」「終了日時」のようなテキストボックスが2つあり、「開始日時」が「終了日時」を超えている場合はNGとしたい。調べたところプラグインを追加すれば実装できるみたい。以下に実装方法をメモ。
CDN
CDNで使う場合は以下を記述する。「isSameOrBefore.min.js」が今回追加するプラグインになる。
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/plugin/isSameOrBefore.min.js"></script>
異なるバージョンを利用したい場合は以下から探す。
https://cdnjs.com/libraries/dayjs
実装方法
ソースコード
//プラグイン読み込み dayjs.extend(dayjs_plugin_isSameOrBefore); const date_1 = dayjs('2025-08-01 00:00:00'); const date_2 = dayjs('2025-08-31 00:00:00'); //2025-08-01は2025-08-31より過去かどうか console.log(date_1.isBefore(date_2)); //true //2025-08-31は2025-08-01より過去かどうか console.log(date_2.isBefore(date_1)); //false
注意点
isBeforeの場合、同一日時を比較するとfalseが返ってくる。
同一日時選択時は別のエラーメッセージなんかを出したい場合は「if( date_1 == date_2 )」のような形で記述すること。
その他
Day.jsの基本的な使い方は過去記事を参照すること。
関連記事
-
-
JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法
以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...