ユーザーが日付と時刻(年・月・日・時間・分)を入力できるinput要素のdatetime-local型で、選択できる時間帯を制御する方法をご紹介します。
datetime-localの解説はこちら
選択された日付に関係なく、9時から17時までの時間帯を選択するようにしたかった場合、JavaScriptで制御します。
<!-- datetime-local型を持つinput要素 -->
<input type="datetime-local" id="datetime" onchange="restrictTime(this)">
<script>
function restrictTime(input) {
// 選択された日時をDate オブジェクトに変換
const selectedTime = new Date(input.value);
// 選択された時間の「時」の部分を取得
const hour = selectedTime.getHours();
// 選択された時間が9時より前、または17時以降の場合
if (hour < 9 || hour >= 17) {
// アラートを表示して、営業時間内の選択を促す
alert("営業時間外です。9:00から17:00の間で選択してください。");
// 選択された日時をクリア(空文字列に設定)
input.value = "";
}
}
</script>
営業時間外の時間帯が選択されるとアラートが出て、日時がクリアされます。
上記のコードで作られたinputはこちら↓