JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで日付が有効かどうかを確認する方法

JavaScriptでは、文字列から生成したDateオブジェクトが本当に有効な日付かどうかを、isNaN()メソッドを使って簡単にチェックできます。

判定の仕組み

存在しない日付（例：「2018/13/45」）を指定してDateオブジェクトを生成すると、そのオブジェクトはInvalid Date（無効な日付）になります。この状態でgetMonth()やgetTime()を呼び出すとNaN（Not a Number）が返されるため、この性質を利用して日付の妥当性を判定できます。

  • isNaN(date.getMonth()) が false → 有効な日付
  • isNaN(date.getMonth()) が true → 無効な日付

サンプルコード

次のコードでは、有効な日付と無効な日付の両方をチェックしています。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var date1, date2;

         // 有効な日付
         date1 = new Date("2018/1/1");
         if (!isNaN(date1.getMonth())) {
            document.write("Valid date1: " + date1);
         } else {
            document.write("<br>Invalid date1");
         }

         // 無効な日付（13月45日は存在しない）
         date2 = new Date("2018/13/45");
         if (!isNaN(date2.getMonth())) {
            document.write("<br>Valid date2: " + date2);
         } else {
            document.write("<br>Invalid date2");
         }
      </script>
   </body>
</html>

実行結果

Valid date1: Mon Jan 01 2018 00:00:00 GMT+0900 (Japan Standard Time)
Invalid date2

getTime()を使った判定方法

getMonth()の代わりにgetTime()を使用しても同じように判定できます。こちらの方が意図が明確で、実務でもよく使われる書き方です。

var date = new Date("2018/1/1");

if (!isNaN(date.getTime())) {
   console.log("有効な日付です");
} else {
   console.log("無効な日付です");
}

汎用的な判定関数を作る

日付チェックを何度も行う場合は、関数としてまとめておくと便利です。

function isValidDate(d) {
   return d instanceof Date && !isNaN(d.getTime());
}

console.log(isValidDate(new Date("2018/1/1")));   // true
console.log(isValidDate(new Date("2018/13/45"))); // false

まとめ

JavaScriptで日付の有効性を確認するには、無効な日付がNaNを返すという特性を利用し、isNaN(date.getTime())で判定するのがシンプルで確実な方法です。ユーザーの入力値やAPIから取得した日付を扱う際には、予期しないエラーを防ぐために必ずバリデーションを行うようにしましょう。

  1. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1

  2. JavaScriptで正規表現を使って有効な日付形式（YYYY-MM-DD）を確認する方法

    正規表現による日付形式のチェックJavaScriptで入力された日付がYYYY-MM-DD形式として有効かどうかを確認したい場合は、正規表現（RegExp）を使うのが最もシンプルです。まず、次の正規表現パターンを定義しましょう。const dateFormat = /^\d{4}\-\d{2}\-\d{2}$/;このパターンの意味は以下の通りです。^\d{4} … 文字列の先頭が4桁の数字（年）であること\-\d{2} … ハイフンの後に2桁の数字（月）が続くこと\-\d{2}$ … ハイフンの後に2桁の数字（日）で文字列が終わることコード例<!DOCTYPE html> <