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

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>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .check-valid-date {
        border: 1px solid red;
    }
</style>
</head>
<body>
<input type="date" id="check-valid-date" class="form-control calender-black" name="dateCalender">
<script>
    const dateFormat = /^\d{4}\-\d{2}\-\d{2}$/;
    document.getElementById("check-valid-date").addEventListener("change", checkingForValidDate);
    function checkingForValidDate() {
        console.log(this.value, dateFormat.test(this.value));
        this.classList.toggle('check-valid-date', dateFormat.test(this.value));
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存し、そのファイルを右クリックします。VS Codeエディターをお使いの場合は、表示されたメニューから「Open with Live Server」を選択してください。

出力結果

実行すると、次のような画面が表示されます。

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

ここで、カレンダーから任意の日付を選択してみましょう。スナップショットは以下の通りです。

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

上記のように、コンソールには TRUE が表示されています。これは、dateFormat.test() メソッドによって、選択された値が有効な日付形式（YYYY-MM-DD）であると判定されたことを意味します。

補足：形式チェックと実在チェックの違い

この正規表現によるチェックはあくまで書式の妥当性のみを判定するものです。例えば「2022-13-45」のように存在しない月や日であっても、形式が合致していればTRUEが返されます。実際の日付として有効かどうかまで確認したい場合は、Dateオブジェクトと組み合わせて検証を行うか、日付ライブラリ（date-fnsやDay.jsなど）を利用するとよいでしょう。

  1. JavaScriptでさまざまな日付形式を扱う方法｜サンプルコード付きで解説

    JavaScriptで日付を扱う際は、組み込みのDateオブジェクトを使用します。Dateコンストラクタにさまざまな形式の文字列を渡すことで、それぞれの形式に応じた日付オブジェクトを生成できます。ここでは、複数の日付形式を実際にページへ表示するサンプルコードを紹介します。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

  2. JavaScriptのDateコンストラクタープロパティとは？使い方を実例で解説

    JavaScriptのDateコンストラクタープロパティは、その日付オブジェクトを生成した元となるコンストラクター関数（Date()）を返すプロパティです。すべてのJavaScriptオブジェクトが持つconstructorプロパティの一つで、Dateオブジェクトに対して使用すると、function Date() { [native code] }という形式の関数定義が出力されます。 このプロパティを活用することで、あるオブジェクトが本当にDateインスタンスであるかを確認したり、動的に新しいDateオブジェクトを生成したりすることができます。以下に、実際の動作を確認できるサンプルコードを紹介