无法在 Chrome 中设置 type="time" 的输入元素的初始值

Posted 2023-03-05

【中文标题】无法在 Chrome 中设置 type="time" 的输入元素的初始值

【英文标题】：Can't set initial value of input element with type="time" in Chrome

【发布时间】：2015-01-02 00:12:54

【问题描述】：

我喜欢 Chrome 在您使用 type="time" 属性/值时自动为您提供屏蔽/格式。但我似乎无法为控件设置初始值。

这个：

<input type="time" value="05:00 PM" />

在 Chrome 中仅呈现为空白（带有遮罩）。当我的表单提交时，它提交为空白。

我猜这与我在值中设置的字符串的格式有关。但我不知道正确的格式是什么（以及为什么我使用的格式不起作用 - 对我来说似乎是一种合理的时间格式）。

这里有一个JSFiddle，以备不时之需。

有什么建议吗？

【问题讨论】：

RFC3339 我相信，当我在我的桌面上时会检查一下。

take a look here almost it's the same pb

【参考方案1】：

尝试类似：

<input type="time" value="17:00:00" />

阅读this。

【讨论】：

在 chrome 上显示时间为下午 5:00，但在 IE 上呈现并显示为 17:00:00

这看起来可能确实回答了我的问题，所以我很快就会接受它。但正如@Phani 所说，这会产生一些问题，因为 IE 将以 24 小时格式显示它，而 Chrome 将以 12 小时格式显示它（我假设是因为本地文化设置）。不过估计也没有办法了。

【参考方案2】：

所以，根据the spec：

值：[RFC 3339] 中定义的有效部分时间。

请参阅RFC 3339，特别是脚注中的第 5.6 节。在这里你会发现它被定义为

partial-time    = time-hour ":" time-minute ":" time-second
                  [time-secfrac]

因此，实际上这意味着您不能在值中使用 PM 或 AM 之类的任何内容，尽管浏览器可能会决定以任何它希望的方式呈现时间（取决于用户如何选择有时甚至）。但是，您在提交表单时收到的值将始终采用上述格式。

【讨论】：

类似于我对@Chong Lip Phang 的回答的评论 - 我想我必须进行浏览器嗅探（或类似 Modernizr 的东西）以查看是否支持时间并使用这种格式，或者如果不是，请自行将其格式化为当地文化...

@Tim Guess 其他人已经为你做到了；-) github.com/jonstipe/datetime-polyfill

@Tim：如果您不习惯 polyfill，请阅读它们。这只是谷歌上最先出现的一个，我自己过去也使用过一个不同的，但它为您提供了一个起点。

当您说“95% 的浏览器支持它”时，您指的是什么“它”？时间输入类型？ Internet Explorer 不支持它（即使在 IE 11 中），我的客户中有超过 50% 的人是这样的。我会去polyfills。谢谢指点！

@Tim：我很想打自己，出于某种原因，我查找了type=number 而不是type=date（为我辩护，我在我的一个项目中使用数字输入类型今天下午拥有...）