【JavaScript】日付フォーマットチェック

フォームにテキストで入力された日付がYYYY/MM/DDフォーマットを満たすかチェックするメソッドです。 通常は日付の入力はdatepickerなどでカレンダーから選択することが多いですが、 同時にテキストでも入力できるようになっていることが多いです。 テキストで入力した内容がカレンダーで選択したときに入力されるフォーマットと一致しているかチェックする必要があったりするときに 以下のようなメソッドを使用します。

function isValidDate(str) {
    // 1. フォーマット（YYYY/MM/DD）チェック
    if (!str.match(/^\d{4}\/\d{2}\/\d{2}$/)) {
        return false;
    }
    
    // 2. 年、月、日を取得
    var yearStr = str.substr(0, 4);
    // 3. Dateオブジェクトでは月は0～11となるため、-1してそれに合わせる
    var monthStr = str.substr(5, 2) - 1;
    var dayStr = str.substr(8, 2);

    // 4. 日付が不正でないかチェック
    var date = new Date(yearStr, monthStr, dayStr);
    if(date.getFullYear() != yearStr
        || date.getMonth() != monthStr
        || date.getDate() != dayStr
    ) {
        return false;
    }
    return true;
}

解説

１．フォーマット（YYYY/MM/DD）チェック

正規表現で 数字4桁/数字2桁/数字2桁 となっているか確認します。 この場合2021年1月1日を表す場合、2020/01/01 のように前0をつけている必要があります。

2．年、月、日を取得

文字列を位置指定で抽出します。
注意点として、前項のフォーマットチェックで前0ありなしどちらも許容する場合は区切る位置が一つに定まらなくなるので、 スラッシュの位置で区切るなどする必要が出てきます。

var yearStr = str.split("/")[0];

3．Dateオブジェクトでは月は0～11となるため、-1してそれに合わせる

この後Dateオブジェクトから取得した月の値(0～11)と比較するため、1～12を0～11と変換しています。

4．日付が不正でないかチェック

JavaScriptではDateオブジェクトを生成するときに引数に2月30日などの存在しない日付をいれても、エラーとならず3月2日のような別の日付として設定されてしまいます。 これを利用して、文字列型の変数と生成したDateオブジェクトの日付を比較して、異なる場合は存在しない日付が入力されたということです。

最後に

まあ、こういったものもMoment.jsなどの日付操作ライブラリを導入すれば簡単に解決するわけですが、プロジェクトの制約上、ピュアJavaScriptしか使えない場合などはこのようにちまちま実装していく必要があるのです。