ウェブフォームで特定の日付を選択不可にする必要がある場合、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コードが設定されました。過去の日付が選択不可になります。
よくある質問（FAQ）
Q. JavaScriptのプルダウンで日付を連動させるには？
A. 年・月のselectのchangeイベントを監視し、選択された年と月に応じてその月の日数を計算、日のselectのoptionを動的に生成します。うるう年はnew Date(year, 2, 0).getDate()で判定できます。
Q. 月の日数をJavaScriptで取得するには？
A. new Date(year, month, 0).getDate()で指定した年月の最終日が取得できます。monthには翌月を指定（1〜12）し、日に0を指定することで前月の最終日が求められます。
Q. うるう年かどうかを判定するには？
A. (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0がうるう年の条件です。または new Date(year, 1, 29).getMonth() === 1で判定できます（2月29日が有効なら2月=1）。
まとめ
ウェブフォームで特定の日付を選択不可にする方法について解説しました。JavaScriptを使用して、プルダウン内の日付を動的に制御することで、ユーザーが選択できないようにします。必要に応じて、日付の取得方法や比較方法をカスタマイズしてください。