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

Question

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

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

将“最小”值设置为 00:00:00，将“最大”值设置为“06:00:00”即可按预期工作。当最小值在午夜之前时，就会出现问题。

我希望最小值和最大值能够创建一个范围，但这并不能按预期工作。

Answer 1

如 MDN 文档中所述：

与许多数据类型不同，时间值具有周期域，这意味着 值达到可能的最高值，然后回滚 又回到了起点。例如，指定分钟为 14:00 最大值 2:00 表示允许的时间值从 2:00 开始 PM，从午夜运行到第二天，凌晨 2:00 结束。

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>

Answer 2

我使用

:invalid

CSS 伪类进行了一些实验，但我无法想出任何东西。

请注意，在 Firefox 中（与 Chrome 不同），浏览器在任何

<input type="time">

表单元素上不包含向上和向下箭头，因此

min

和

max

属性不起作用。

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

默认情况下，

<input type="time">

不会对 输入的值，除了用户代理的界面之外，通常不会 允许您输入时间值以外的任何内容。这是 有帮助（假设用户完全支持时间输入 代理），但你不能完全依赖该值来确定合适的时间 字符串，因为它可能是空字符串 ("")，这是允许的。它是 该值也可能看起来大致像有效时间，但不是 正确，例如 25:05。

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

Answer 3

很遗憾您没有指定您的后端语言。但对于那些在 PHP 中可能需要它的人可以使用这个。

<input type="time" min="<?php echo(strtotime("03:00")); ?>" max="<?php echo(strtotime("06:00")); ?>">