HTML 输入时间，其中最小值是下午（晚），最大值是上午（早）

Question

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

我试过使用 Javascript，尽管我想将其用作最后的手段。我不希望本机组件显示我不希望用户使用的值 select（例如，在移动设备上）。

将 'min' 值设置为 00:00:00 并将 'max' 值设置为“06:00:00”，效果如预期。这是当最小值在午夜之前成为一个问题。

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

Answer 1

我使用 :invalid CSS pseudo-class 做了一些实验，但我什么都想不出。

请注意，在 Firefox 中（与 Chrome 不同），浏览器在任何 <input type="time"> 表单元素，因此 min 和 max 属性无效。

我注意到 Mozilla 开发者网络 说了以下内容：

By default, <input type="time"> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the time input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (""), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as 25:05.

来源： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Validation

Answer 2

如 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 中无法正常工作，在使用 min 值大于 max 的简单测试后，所有时间都无法通过验证并且表单无法正常工作。

我建议 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>

HTML 输入时间，其中最小值是下午（晚），最大值是上午（早）

HTML Input Time, where min is pm (late) and max is am (early)

html

time

max

min