输入类型=时间不适用于 min 和 max 属性答案

【问题标题】：Input type=time is not working with min and max attributes输入类型=时间不适用于 min 和 max 属性
【发布时间】：2020-12-30 05:58:14
【问题描述】：

这个问题可能会被问很多次。但是否可能，并没有明确的解释。

我有一个 type="time" 的输入。我已经对其应用了 min 和 max 属性。但是选择器仍然显示所有时间值，也可以选择不在范围内的任何时间值。

<input type="time" id="gfg" name="Geek_time" placeholder="Enter time" min="16:00" max="22:00">

我正在安卓手机上查看这个。这在 web chrome 浏览器中也不起作用。而输入类型=“日期”

在输入时间时会出现这种行为吗？
只有基于 JS 的验证在这里有效，而不是内置的 min/max？

【问题讨论】：

可以分享相关的html代码吗？
@Amit 我已经尝试过 w3schools / 其他一些教程中提供的示例代码
我认为最初您可以输入任何值，但表单不会通过并且验证将失败。除非你在某处使用了 event.preventDefault( ) 或者你以某种方式绕过了验证。
同时检查浏览器版本兼容性...developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

标签： html input time

【解决方案1】：

下面是一个非常简单的html代码。呈现 html 后，您可以输入任何您喜欢的值，但表单不会通过。您的浏览器必须兼容。检查浏览器compatibility。

<html>
<head>
</head>
<body>
<form>
<input type="time" id="gfg" name="Geek_time" placeholder="Enter time" min="16:00" max="22:00">
<input type="submit">
</form>
</body>
</html>

我尝试输入超出范围（小于 16:00 或大于 22:00）的值，然后提交表单。它给出了错误。

【讨论】：

但是我没有任何表格。只需简单的 html 即可。
好的，我现在知道原因了。输入是表单的一个元素。如果您出于形式以外的原因而想要它，那么您将不得不借助 JS。浏览器可能无法为您提供帮助，因为它不再是附加到提交按钮的表单。
好的。但它适用于 type="date" 和 type="datetime-local"
我猜是因为范围之外的日期在日历中是不活动的，或者日期没有首先呈现。这与验证不同。元素不存在。然而，时间输入字段很复杂，因为浏览器很难做出检查小时和分钟组合的复杂决定（如果它们没有下溢或上溢）。我想将决定推迟到提交表单需要更简单和合乎逻辑的步骤，因为表单元素通常是表单的一部分。但是，您始终可以编写或找到 JS 来完成您的工作。