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の基本的な使い方は過去記事を参照すること。
関連記事
-
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...