JavaScriptでInvalid Dateを判定する

フロントエンドの開発で日付操作にdate-fnsを使用しています。
今回日付を年・月・日と別々のselectボックスから選択させて検索をするという仕様でUIを作成していたのですが、この状態ですと存在しない日付を選択できてしまうので(2/31など)存在しない日付の判定をしようと試みました。

Contents

date-fnsには日付の存在を判定するメソッドがない

以下のサイトでも書かれていますがdate-fnsの日付チェックのメソッドは完全に存在しない日付を判定できるわけではないようです。

ということでJavaScript の Date クラスが不正な日付を生成しようとしたときに返すInvalid Dateを判定する関数を作成しようと試みました。

最初、以下のように返ってきた値がinvalid dateだったら○○するというような処理を書こうと試みましたが、JavaScriptではinvalid dateを変数に入れて比較しても判定は常にfalseになることがわかりました。

const INVALID_DATE = new Date('invalid date');
new Date('hogehgoe') === INVALID_DATE;
// js: false

以下のURLをそのまま参考にさせていただいきました。
https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date

getTime()メソッドは存在しない日付で実行するとNaNを返すのでgetTime()メソッドの結果をNumber.isNaNメソッドに渡してtrue or falseを判定するようにします。

const isInvalidDate = (date: Date) => Number.isNaN(date.getTime());

isInvalidDate(new Date('2022-10-04'));
// js: false

isInvalidDate(new Date('hogehoge'));
// js: true