Step 属性在 <input type="datetime-local"> 和 <input type="time">

Question

我无法理解

<input type="datetime-local">

和

<input type="time">

中的step属性。它似乎在所有主要浏览器中都实现得很糟糕。

Step="1"，按预期每 1 秒走一步

通过运行下面的代码片段可以看到，当我们将步骤设置为 1 时，时间以秒为单位显示，而不是分钟（步骤以秒为单位定义）。

<input type="datetime-local" step=1>
<input type="time" step="1">

Step="60"，按预期每 1 分钟走一步

<input type="datetime-local" step=60>
<input type="time" step="60">

到目前为止，一切顺利！

Step="600"，...刚刚发生了什么？

<input type="datetime-local" step=600>
<input type="time" step="600">

我是疯了还是应该期望输入只会以 600 秒（10 分钟）为单位显示选项？也许只有当你从几秒到几分钟再到几小时时它才起作用，让我们看看

Step="3600"，...不是我所期望的😞...但是等等！？

<input type="datetime-local" step=3600>
<input type="time" step="3600">

您是否注意到时间的分钟部分是“关闭”的？这有点表明分钟被禁用，因为预计以 1 小时为单位。

总结

总而言之，这一切都很奇怪。我在这里缺少什么？日期和时间的输入是很基本的事情，为什么需要用javascript来实现呢？

附注---- 我知道...我知道...其他人之前在 SO 中问过这个问题（Step 属性不适用于 HTML 输入类型）。但我没有看到明确的答案，我想扩展问题以显示不同的步长值。我认为在 Chrome 中，steps="3600" 改变分钟的颜色是很奇怪的。别让我开始谈论 Safari...

Answer 1

<input type="datetime-local">

很无聊，如果你按键盘上的向上箭头或向下箭头，它只是改变步骤。它不会显示您想要的步骤。