问题描述

我正在使用 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 中不允许使用 patternplaceholder 属性。而 placeholder="hrs:mins"如果被实施,将是潜在的误导。当浏览器区域设置使用 「.」 作为分隔符时,用户必须输入 12.30(带有句点) 而不是 12:30 。

我的结论是,您应该使用 input type=textpattern 属性,并使用一些 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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛