選択できる日時を制限したい

以下のフォームは、「今日から3ヶ月間で15分刻みの時間を指定したい」というニーズに応えたフォームです。

	<form action="#" method="get">
		<label for="date-input">日付:</label>
		<input type="date" id="date-input" required>

		<label for="time-input">時刻:</label>
		<select id="time-input" required>
			<option value="00:00">00:00</option>
			<option value="00:15">00:15</option>
			<option value="00:30">00:30</option>
			<option value="00:45">00:45</option>
			<!-- 以下、必要な時刻オプションを追加 -->
		</select>

		<script>
			var dateInput = document.getElementById("date-input");
			var timeInput = document.getElementById("time-input");

			var currentDate = new Date().toISOString().slice(0, 10);
			dateInput.setAttribute("min", currentDate);
		</script>
	</form>

日付と時刻の選択を可能にするHTMLフォームです。以下にそれぞれの要素とスクリプトの機能を解説します。

• 日付入力フィールド: <input type="date" id="date-input" required>
  • type="date": ユーザーがカレンダーから日付を選択できるようにするための入力フィールドタイプです。
  • id="date-input": 日付入力フィールドのID属性です。スクリプトからこの要素を取得するために使用されます。
  • required: 入力が必須であることを示す属性です。
• 時刻選択ドロップダウン: <select id="time-input" required>...</select>
  • id="time-input": 時刻選択ドロップダウンのID属性です。スクリプトからこの要素を取得するために使用されます。
  • required: 選択が必須であることを示す属性です。
• 時刻オプション: <option value="00:00">00:00</option>...
  • <option>: 時刻選択ドロップダウン内の個々の選択肢を表す要素です。
  • value="00:00": オプションの値を指定します。この値はフォームが送信された際にサーバーに送信される値です。
  • 00:00: ドロップダウンで表示されるユーザーに対する可読性のある表示値です。
• スクリプト部分: <script>...</script>
  • スクリプトはJavaScriptのコードです。この場合、スクリプトは以下の処理を行います：
    • var dateInput = document.getElementById("date-input");: date-input IDを持つ要素を取得し、dateInput 変数に割り当てます。
    • var timeInput = document.getElementById("time-input");: time-input IDを持つ要素を取得し、timeInput 変数に割り当てます。
    • var currentDate = new Date().toISOString().slice(0, 10);: 現在の日付を取得し、ISO 8601形式であるため、最初の10文字（年月日）を取り出して currentDate 変数に割り当てます。
    • dateInput.setAttribute("min", currentDate);: dateInput 要素の min 属性に、currentDate の値を設定します。これにより、選択できる最小の日付が現在の日付に制限されます。

最後までお読みいただきありがとうございます。