勉強したことのメモ

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

  関連記事

Dexie.jsを利用してIndexedDBを取り扱う方法

IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

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

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

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...