Wie passt man das Zeitformat des <input>-Elements an (12 Stunden oder 24 Stunden)?
P粉488464731
2023-08-20 18:47:36
<p>Ich verwende ein HTML5-Eingabeelement mit <code>type=time</code>. Das Problem ist, dass die Uhrzeit im <code>12-Stunden-Format</code> angezeigt wird, ich aber möchte, dass sie im <code>24-Stunden-Format</code> angezeigt wird. Wie stelle ich das 24-Stunden-Format ein? </p>
<p>Das ist mein Eingabefeld: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><input type="time" name="time" placeholder="hour:minute" pattern="^([0-1]?[0 -9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="Eingabezeit" erforderlich>< /pre>
<p><br /></p>
根据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来检查输入的正确性。HTML5时间输入
这是与日期/时间相关类型中最简单的一种,允许用户在24/12小时制的时钟上选择时间,通常取决于用户的操作系统区域设置。返回的值以24小时的
小时:分钟
格式,看起来类似于14:30
。更多详细信息,包括每个浏览器的外观,可以在MDN上找到。