html5时间input显示12小时
我使用type=time HTML 5input元素。 问题是它显示了12 hours时间，但我希望它每天24 hours显示它。 我怎样才能达到24小时？ 这是我的input字段
<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时间input
这是最简单的date/时间相关的types，允许用户select一个24小时的时间 ，没有上午或下午 。 返回的值是小时：分钟看起来像14:30。
<input type="time" name="time" />
此function仍在草稿中。 每个浏览器显示不同。
– 歌剧（Presto引擎）显示它正确的方式。
– Chrome（Webkit引擎）在AM / PM中显示。
– 火狐（壁虎引擎）不显示任何东西，但validation。
– 边在popup式窗口中显示所有需要的值
<input type="time" name="time" />
通过HTML5草案， input type=time创build一个时间input的控制，预计将执行使用“用户的首选演示文稿”。 但是这实际上意味着使用一个小部件，其中时间呈现遵循浏览器语言环境的规则。 因此，独立于周围内容的语言，呈现方式因浏览器的语言，底层操作系统的语言或系统范围的语言环境设置（取决于浏览器）而异。 例如，使用芬兰语版本的Chrome浏览器，我发现这个小工具使用标准的24小时制。 你的里程会有所不同。
因此， input type=time是基于本地化的想法，将其全部从页面作者手中提取出来。 这是故意的; 在HTML5讨论中多次提出这个问题，结果相同：没有变化。 （除了可能增加对文本的澄清，使这种行为描述为预期。）
请注意， input type=time不允许使用pattern和placeholder属性。 而placeholder="hrs:mins" ，如果它被实现，可能会有误导性。 当浏览器语言环境使用“。”作为分隔符时，用户必须键入12.30（有句点）而不是12:30。
我的结论是，你应该使用input type=text ， pattern属性和一些JavaScript，在本质上不支持pattern属性的浏览器上检查input的正确性。
它取决于你的本地系统时间设置，24小时，然后它会显示你24小时的时间。
这种types的支持仍然很差。 Opera以您想要的方式显示它。 Chrome 23以秒和AM / PM显示，在24版本（此时为开发分支），它将消除秒（如果可能），但没有关于AM / PM的信息。
这不是你想要的，但在这一点上，我看到实现你的时间select器格式的唯一select是使用JavaScript。
网页浏览器启动时 ，取决于用户操作系统的时间格式。
所以：
- 如果您的计算机的系统首选项设置为使用24小时制，则浏览器会将
<input type="time">元素显示为--:--（时间范围：00：00-23：59）。 - 如果您将计算机的系统首选项更改为使用12小时，则在您退出并重新启动浏览器之前，输出不会更改。 然后它会变成
--:-- --（时间范围：上午12:00 – 晚上11:59）。
而且（截至本文），浏览器支持只有约75％（ caniuse ）。 耶：边缘，铬，歌剧，Android。 Boo：IE，Firefox，Safari）。
HTML只提供input type="time"如果你使用bootstrap，那么你可以使用timepicker。 你可以从这个URL http://jdewit.github.io/bootstrap-timepicker获取代码可能会帮助你;
如果你能够/愿意使用一个微小的组件，我写了这个Timepicker – jonataswalker/timepicker.html – 为我自己的需要。
用法如下所示：
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="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>
即使你看到HH：MM AM / PM格式的时间，在后台它仍然以24小时格式工作，你可以尝试使用一些基本的javascript来看看。
你可以试试这个HTML端
<label for="appointment-time">Choose Time</label> <input class="form-control" type="time" ng-model="time" ng-change="ChangeTime()" /> <label class="form-control" >{{displayTime}}</label>
JavaScript方面
function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) { function z(n) { return (n<10? '0':'') + n; } var bits = time.split(':'); var mins = bits[0]*60 + (+bits[1]) + (+minsToAdd); return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); } $scope.ChangeTime=function() { var d = new Date($scope.time); var hours=d.getHours(); var minutes=Math.round(d.getMinutes()); var ampm = hours >= 12 ? 'PM' : 'AM'; var Time=hours+':'+minutes; var DisplayTime=addMinutes(Time, duration); $scope.displayTime=Time+' - '+DisplayTime +' '+ampm; }
