HTML 输入时间，其中 min 是 pm(晚)，max 是 am(早)

Question

我有一个输入框，类型为“时间”。我想将迟到时间 (23:00pm) 作为最小值，将早期时间 (6:00am) 作为最大值 - 创建一个 23pm - 6am 的范围。 (即中午 11 点、中午 12 点、凌晨 1 点、凌晨 2 点、凌晨 3 点、凌晨 4 点、凌晨 5 点、早上 6 点)。

我尝试过使用 Javascript，尽管我想将其用作最后的手段。我不希望 native 组件显示我不希望用户选择的值(例如，在移动设备上)。

将“最小”值设置为 00:00:00 并将“最大”值设置为“06:00:00”可以正常工作。当最小值在午夜之前时，它就会成为一个问题。

我希望最小值和最大值能创建一个范围，但这并不像预期的那样有效。

Answer 1

如 MDN 文档中所述:

Unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max

也就是说，这在 Chrome 76.0 中似乎无法正常工作，在使用大于 max 的 min 值进行简单测试后，所有时间都无法通过验证并且表单无法正常工作。

我建议 https://timepicker.co/因为它可以跨浏览器工作。

input:invalid+.validity:after {
  content: '✖';
}

input:valid+.validity:after {
  content: '✓';
}

<form>
  <label for="time1">3:00 to 6:00: </label>
  <input type="time" min="3:00" max="6:00" name="time1" required>
  <span class="validity"></span>
  <hr>
  <label for="time2">23:00 to 6:00: </label>
  <input type="time" min="23:00" max="6:00" name="time2" required>
  <span class="validity"></span>
</form>