<input type="time">

<label for="appt-time">予約時刻を選んでください。</label>
<input id="appt-time" type="time" name="appt-time" value="13:30" />

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

<form>
  <label for="startTime">開始時刻: </label>
  <input type="time" id="startTime" />
  <p>
    <code>time</code> 入力欄の値:
    <code> "<span id="value">n/a</span>"</code>
  </p>
</form>

const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
}, false);

<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time" />
</form>

<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time" step="2" />
</form>

<form>
  <label for="appt-time">
    予約時刻を選んでください (営業時間 12:00～18:00):
  </label>
  <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
  <span class="validity"></span>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

const input = document.createElement('input');
input.type = 'time';
input.min = '23:00';
input.max = '01:00';
input.value = '23:59';

if (input.validity.valid && input.type === 'time') {
  // <input type=time> が範囲の折り返しに対応している
} else {
  // <input type=time> が範囲の折り返しに対応していない
}

<form>
  <div>
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
      id="appt-time"
      type="time"
      name="appt-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>

<form>
  <div>
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
      id="appt-time"
      type="time"
      name="appt-time"
      min="12:00"
      max="18:00"
      required
      pattern="[0-9]{2}:[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <div class="nativeTimePicker">
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
      id="appt-time"
      type="time"
      name="appt-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">
    予約時刻を選んでください (営業時間 12:00～18:00):
  </p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <select id="hour" name="hour">
        <label for="hour">時</label>
        </select>
      </span>
      <span>
        <select id="minute" name="minute">
        <label for="minute">分</label>
        </select>
      </span>
    </div>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

// 変数の宣言
const nativePicker = document.querySelector('.nativeTimePicker');
const fallbackPicker = document.querySelector('.fallbackTimePicker');
const fallbackLabel = document.querySelector('.fallbackLabel');

const hourSelect = document.querySelector('#hour');
const minuteSelect = document.querySelector('#minute');

// 最初はフォールバックを非表示にする
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// 新しい日付入力が文字列入力にフォールバックされるかどうか
const test = document.createElement('input');

try {
  test.type = 'time';
} catch (e) {
  console.log(e.description);
}

// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
if (test.type === 'text') {
  // ネイティブの日付選択を隠してフォールバック版を表示
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // 時と分を動的に生成する
  populateHours();
  populateMinutes();
}

function populateHours() {
  // 時刻の <select> に営業時間の 6 時間分を生成する
  for (let i = 12; i <= 18; i++) {
    const option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // 分の <select> に 1 時間内の 60 分を生成する
  for (let i = 0; i <= 59; i++) {
    const option = document.createElement('option');
    option.textContent = (i < 10) ? `0${i}` : i;
    minuteSelect.appendChild(option);
  }
}

// 時が 18 になったら、分を 00 に設定する
// — 18:00 以降を選択できなくする
 function setMinutesToZero() {
   if (hourSelect.value === '18') {
     minuteSelect.value = '00';
   }
 }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;