動的な日付選択プルダウンメニューとは？
動的な日付選択プルダウンメニューは、ユーザーが特定の日付を選択できるようにするウェブ要素です。
このプルダウンメニューは、現在の日付から未来の日付までの一連のオプションを表示し、ユーザーが日付を選択できるようにします。
予約システムやイベントの日程選択などで役立ちます。
現在の日付を取得し一週間分プルダウン
//html部分
<label for="date">日付を選択してください：</label>
<select id="date" name="date">
<!-- ここに日付オプションが動的に追加されます -->
</select>
//Javascript部分
<script>
// ページが読み込まれたときに実行する関数
window.onload = function() {
var dateSelect = document.getElementById("date"); // プルダウンメニュー要素を取得
var currentDate = new Date(); // 現在の日付を取得
var oneWeekLater = new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 現在から1週間後の日付を計算
// 当日から1週間後までの日付をプルダウンメニューに追加
while (currentDate <= oneWeekLater) {
var option = document.createElement("option");
option.text = currentDate.toLocaleDateString();
option.value = currentDate.toISOString().split('T')[0];
dateSelect.appendChild(option);
currentDate.setDate(currentDate.getDate() + 1); // 日付を1日進める
}
};
</script>
コメント