勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptの「Day.js」ライブラリで日付の比較を行う方法

  JavaScript

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

  関連記事

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...

バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法

あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...