【JavaScript】フォーム内のプルダウンで特定の日付を選択不可にする方法

ウェブフォームで特定の日付を選択不可にする必要がある場合、JavaScriptを使用してプルダウン（ドロップダウンリスト）を動的に制御することができます。本記事では、その方法について解説します。

1. フォームのHTMLを設定する

まず、HTMLでフォームを設定します。プルダウン（ドロップダウンリスト）内に特定の日付を選択不可にしたい場合、該当する日付のオプションにdisabled属性を追加します。

<form>
    <select name="dates" id="dates">
        <option value="2024-03-30">2024-03-30</option>
        <option value="2024-03-31">2024-03-31</option>
        <option value="2024-04-01">2024-04-01</option>
        <!-- 他の日付も同様に追加 -->
    </select>
</form>

2. JavaScriptで日付を制御する

JavaScriptを使用して、特定の日付を選択不可にします。現在の日付を取得し、それよりも過去の日付を持つオプションを選択不可に設定します。

<script>
    // 現在の日付を取得
    var today = new Date();
    var year = today.getFullYear();
    var month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月を2桁の文字列に変換
    var day = today.getDate().toString().padStart(2, '0'); // 日を2桁の文字列に変換
    var currentDate = year + '-' + month + '-' + day;

    // ドロップダウンリストの各オプションをチェックし、特定の日付を選択不可にする
    var dropdown = document.getElementById('dates');
    var options = dropdown.options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].value <= currentDate) {
            options[i].disabled = true;
        }
    }
</script>

これで、特定の日付を選択不可にするJavaScriptコードが設定されました。過去の日付が選択不可になります。

まとめ

ウェブフォームで特定の日付を選択不可にする方法について解説しました。JavaScriptを使用して、プルダウン内の日付を動的に制御することで、ユーザーが選択できないようにします。必要に応じて、日付の取得方法や比較方法をカスタマイズしてください。