我正在使用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
Pra*_*man 65
这是最简单的日期/时间相关类型,允许用户选择24小时制,无AM或PM的时间.返回的值是小时:分钟,看起来像14:30.
<input type="time" name="time" />
<input type="time" name="time" />使用不是一个好主意!
Juk*_*ela 24
通过HTML5草稿,input type=time创建一个时间输入控件,预计将使用"用户首选的演示文稿"实现.但这实际上意味着使用一个小部件,其中时间表示遵循浏览器的语言环境规则.因此,独立于周围内容的语言,演示文稿因浏览器的语言,底层操作系统的语言或系统范围的区域设置(取决于浏览器)而异.例如,使用芬兰语版本的Chrome,我将小部件视为使用标准的24小时制.你的里程会有所不同.
因此,input type=time基于本地化的想法,将所有这些都从页面作者手中夺走.这是故意的; 在HTML5讨论中已经多次提出这个问题,结果相同:没有变化.(除非可能添加对文本的说明,否则将此行为描述为预期.)
请注意,不允许使用pattern和placeholder属性input type=time.而且placeholder="hrs:mins",如果实施,可能会产生误导.当浏览器区域设置使用"."作为时间分隔符时,用户很可能必须键入12.30(带有句点)而不是12:30.
我的结论是,你应该使用input type=text,与pattern属性,并与一些JavaScript,检查在不支持的浏览器是否正确输入pattern属性本身.
小智 9
它取决于您当地的系统时间设置,24小时后会显示24小时.
它取决于启动Web浏览器时用户操作系统的时间格式.
所以:
<input type="time">元素呈现为--:--(时间范围:00:00-23:59).--:-- --(时间范围:上午12:00 - 下午11:59).而且(截至本文撰写时),浏览器支持率仅为75%左右(caniuse).Yay:Edge,Chrome,Opera,Android.Boo:IE,Firefox,Safari).
如果您能够/愿意使用一个小组件，我编写了这个 Timepicker - https://github.com/jonataswalker/timepicker.js - 以满足我自己的需要。
用法是这样的：
var timepicker = new TimePicker('time', {
lang: 'en',
theme: 'dark'
});
var input = document.getElementById('time');
timepicker.on('change', function(evt) {
var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;
});body {
font: 1.2em/1.3 sans-serif;
color: #222;
font-weight: 400;
padding: 5px;
margin: 0;
background: linear-gradient(#efefef, #999) fixed;
}
input {
padding: 5px 0;
font-size: 1.5em;
font-family: inherit;
width: 100px;
}<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>
<div>
<input type="text" id="time" placeholder="Time">
</div>