Question

我有一个输入框，类型为“时间”。我想将延迟时间（23:00 pm）作为最小值，将早期时间（6:00 am）作为最大值-创建一个范围为23pm-6am。（即晚上11点，12点，1点，2点，3点，4点，5点，6点）。

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

将'min'值设置为00:00:00，将'max'值设置为“ 06:00:00”可以正常工作。最小值在午夜之前变成问题。

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

Answer 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中似乎无法正常工作，经过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">表单元素上均不包含上下箭头，因此{{1 }}和min属性无效。

我注意到 Mozilla开发人员网络说以下内容：

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

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

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

2 个答案: