type属性のdatetime-localで選択できる時間帯を制御する方法

  • URLをコピーしました!

ユーザーが日付と時刻(年・月・日・時間・分)を入力できる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はこちら↓

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次