HTML 输入时间，其中 min 是 pm（晚），max 是 am（早）答案

【问题标题】：HTML Input Time, where min is pm (late) and max is am (early)HTML 输入时间，其中 min 是 pm（晚），max 是 am（早）
【发布时间】：2019-05-29 10:34:41
【问题描述】：

我有一个输入框，类型为“时间”。我想将较晚的时间（下午 23:00）作为最小值，将较早的时间（上午 6:00）作为最大值 - 创建下午 23 点至上午 6 点的范围。（即晚上 11 点、中午 12 点、凌晨 1 点、凌晨 2 点、凌晨 3 点、凌晨 4 点、早上 5 点、早上 6 点）。

我尝试过使用 Javascript，但我想将其用作最后的手段。我不希望原生组件显示我不希望用户选择的值（例如，在移动设备上）。

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

我希望最小值和最大值可以创建一个范围，但这并没有按预期工作。

【问题讨论】：

标签： html time max min

【解决方案1】：

如 MDN 文档中所述：

与许多数据类型不同，时间值具有周期性域，这意味着值达到可能的最高值，然后回滚重新开始。例如，指定最小值为 14:00 最大 2:00 表示允许的时间值从 2:00 开始下午，从午夜一直持续到第二天，凌晨 2:00 结束。

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>

【讨论】：

我已将此标记为“正确答案”。简而言之 - 看起来周期性域限制您的最小时间大于最大时间。我的解决方案是使用 moment.js 并使用 while 循环动态创建一个选择/选项框。不幸的是 timepicker.co 也有同样的问题，你不能在最小值大于最大值的地方设置一个范围。
您也可以使用类型时间和类型日期的组合。

【解决方案2】：

我使用:invalid CSS 伪类进行了一些实验，但我想不出任何结果。

请注意，在 Firefox 中（与 Chrome 不同），浏览器不会在任何 <input type="time"> 表单元素上包含向上和向下箭头，因此 min 和 @ 987654325@属性无效。

我注意到 Mozilla 开发者网络 说如下：

默认情况下，<input type="time"> 不对输入的值，除了用户代理的界面，一般不会允许您输入除时间值以外的任何内容。这是有帮助（假设用户完全支持时间输入代理），但您不能完全依赖该值作为适当的时间字符串，因为它可能是一个空字符串 ("")，这是允许的。它是该值也可能看起来大致像有效时间，但不是是正确的，例如 25:05。

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

【讨论】：