问题描述

我正在使用 html 5 输入元素与 type=time 。问题是它显示时间与 12 hours，但我希望它显示在 24 hours 一天。我该怎么做到 24 小时？这是我的输入字段

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

DEMO

这里是 jsfiddle

最佳解决办法

HTML5 时间输入

这是最简单的日期/时间相关类型，允许用户选择 24 小时制的时间，无 AM 或 PM 。返回的值是小时：分钟，看起来像 14:30 。

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

此功能仍在草稿中。每个浏览器显示不同。

– Opera(Presto Engine) 显示正确的方法.- Chrome(Webkit Engine) 在 AM /PM 中显示.- Firefox(Gecko Engine) 没有显示任何内容，但是 validate.- Edge 显示了 popover 类型中的所有必需值窗口



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

不是一个好主意使用！

次佳解决办法

通过 HTML5 草稿，input type=time 创建了一天中输入的控件，预计将使用 “用户首选演示文稿” 实现。但这真的意味着使用一个小工具，其中时间演示遵循浏览器的语言环境的规则。因此，独立于周边内容的语言，演示文稿因浏览器的语言，底层操作系统的语言或 system-wide 区域设置 (取决于浏览器) 而异。例如，使用 Finnish-language 版本的 Chrome，我将该小工具看作是使用标准的 24 小时制。你的里程会有所不同。

因此，input type=time 是基于本地化的想法，将其全部放在页面作者的手中。这是故意的在 HTML5 讨论中多次提出了这个问题，结果相同：没有变化。 (除了可能添加了对文本的澄清，使此行为按照预期进行描述。)

请注意，input type=time 中不允许使用 pattern 和 placeholder 属性。而 placeholder="hrs:mins"如果被实施，将是潜在的误导。当浏览器区域设置使用 “.” 作为分隔符时，用户必须输入 12.30(带有句点) 而不是 12:30 。

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

第三种解决办法

它取决于您的本地系统时间设置，24 小时后，将显示您 24 小时的时间。

第四种办法

这种类型的支持还是很差的。 Opera 以某种方式显示它。 Chrome 23 显示它与秒和 AM /PM，在 24 版本 (开始分支在这一刻)，它将摆脱秒 (如果可能)，但没有关于 AM /PM 的信息。这不是你想要的，但在这一点上，我看到实现你的时间选择器格式的唯一选择是使用 javascript 。

第五种办法

这取决于 Web 浏览器启动时用户操作系统的时间格式。

所以：

  • 如果您的计算机系统预设置设置为使用 24 小时制，则浏览器会将<input type="time"> 元素呈现为--:--(时间范围：00：00-23：59) 。

  • 如果您更改计算机的系统优先使用 12 小时，则在退出并重新启动浏览器之前，输出将不会更改。然后将更改为--:-- --(时间段：12:00 AM – 11:59 PM) 。

而且 (在撰写本文时)，浏览器支持只有约 75％(caniuse) 。 Yay：Edge，Chrome，Opera，Android 。 Boo：IE，Firefox，Safari) 。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。