如何调整<input>元素的时间格式（12小时制或24小时制）？

Question

我正在使用带有type=time的HTML5输入元素。问题是它显示的时间是12小时制，但我希望它以24小时制显示。我该如何将其设置为24小时制？

这是我的输入字段：

<input type="time" name="time" placeholder="小时:分钟" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>

Answer 1

根据HTML5草案，input type=time创建了一个用于输入一天中时间的控件，预计使用“用户首选的显示方式”来实现。但实际上，这意味着使用一个遵循浏览器本地化规则的小部件。因此，不论周围内容的语言是什么，显示方式都会根据浏览器的语言、底层操作系统的语言或系统范围的区域设置（取决于浏览器）而变化。例如，使用芬兰语版本的Chrome浏览器，我看到的小部件使用标准的24小时制。你的情况可能会有所不同。

因此，input type=time是基于一种将本地化的想法完全交给页面作者之外的方法。这是有意的；在HTML5讨论中，这个问题已经提出了几次，结果都是没有改变（除了可能对文本进行了澄清，将此行为描述为预期的行为）。

请注意，input type=time不允许使用pattern和placeholder属性。而且，如果实现了placeholder="hrs:mins"，可能会产生误导。当浏览器的语言环境使用“.”作为时间分隔符时，用户可能需要输入12.30（使用句点），而不是12:30。

我的结论是，在不支持pattern属性的浏览器上，应该使用input type=text，并使用一些JavaScript来检查输入的正确性。

Answer 2

HTML5时间输入

这是与日期/时间相关类型中最简单的一种，允许用户在24/12小时制的时钟上选择时间，通常取决于用户的操作系统区域设置。返回的值以24小时的小时:分钟格式，看起来类似于14:30。

更多详细信息，包括每个浏览器的外观，可以在MDN上找到。

<input type="time" name="time">