Html html5 时间输入显示 12 小时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13523060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 time inputs shows 12 hours
提问by Om3ga
I am using html 5 input element with type=time. The problem is it shows time with 12 hoursbut I want it to show it in 24 hoursa day. How can I make it to 24 hours? Here is my input field
我正在使用带有 .html 的 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
演示
Here is jsfiddle
这是jsfiddle
采纳答案by Praveen Kumar Purushothaman
HTML5 Time Input
HTML5 时间输入
This one is the simplest of the date/time related types, allowing the user to select a time on a 24 hour clock, no AM or PM. The value returned is hours:minutes which will look something like 14:30.
这是最简单的日期/时间相关类型，允许用户选择24 小时制的时间，没有AM 或 PM。返回的值是 hours:minutes，它看起来像 14:30。
<input type="time" name="time" />
This feature is still in draft. Each browser shows it differently.
此功能仍在草案中。每个浏览器以不同的方式显示它。
- Opera (Presto Engine) shows it the right way.
- Chrome (Webkit Engine) shows it in AM/PM.
- Firefox (Gecko Engine) doesn't show anything, but validates.
- Edge shows all required values in a popover type window
- Opera（Presto Engine）以正确的方式展示了它。
- Chrome（Webkit 引擎）在 AM/PM 中显示它。
- Firefox (Gecko Engine) 不显示任何内容，但会进行验证。
- Edge 在弹出式窗口中显示所有必需的值
<input type="time" name="time" />Not a good idea to use!
不是一个好主意！
回答by Jukka K. Korpela
By HTML5 drafts, input type=timecreates a control for time of the day input, expected to be implemented using “the user's preferred presentation”. But this really means using a widget where time presentation follows the rules of the browser's locale. So independently of the language of the surrounding content, the presentation varies by the language of the browser, the language of the underlying operating system, or the system-wide locale settings (depending on browser). For example, using a Finnish-language version of Chrome, I see the widget as using the standard 24-hour clock. Your mileage will vary.
通过 HTML5 草稿，input type=time为一天中的时间输入创建控件，预计将使用“用户的首选演示文稿”来实现。但这实际上意味着使用时间呈现遵循浏览器区域设置规则的小部件。因此，独立于周围内容的语言，呈现方式因浏览器的语言、底层操作系统的语言或系统范围的区域设置（取决于浏览器）而异。例如，使用芬兰语版本的 Chrome，我看到小部件使用标准的 24 小时时钟。你的里程会有所不同。
Thus, input type=timeare based on an idea of localization that takes it all out of the hands of the page author. This is intentional; the problem has been raised in HTML5 discussions several times, with the same outcome: no change. (Except possibly added clarifications to the text, making this behavior described as intended.)
因此，input type=time基于本地化的想法，将其全部从页面作者的手中夺走。这是故意的；该问题已在 HTML5 讨论中多次提出，结果相同：没有变化。（除了可能对文本添加说明，使这种行为按预期进行描述。）
Note that patternand placeholderattributes are not allowed in input type=time. And placeholder="hrs:mins", if it were implemented, would be potentially misleading. It's quite possible that the user has to type 12.30 (with a period) and not 12:30, when the browser locale uses “.” as a separator in times.
需要注意的是pattern和placeholder属性中不允许input type=time。而且placeholder="hrs:mins"，如果它被实施，可能会产生误导。当浏览器区域设置使用“.”时，用户很有可能必须输入 12.30（带句点）而不是 12:30。作为时代的分隔符。
My conclusion is that you should use input type=text, with patternattribute and with some JavaScript that checks the input for correctness on browsers that do not support the patternattribute natively.
我的结论是，您应该使用input type=text, withpattern属性和一些 JavaScript 来检查在pattern本机不支持该属性的浏览器上输入的正确性。
回答by Alex
Its depends on your local system time settings, make 24 hours then it will show you 24 hours time.
它取决于您本地的系统时间设置，设置为 24 小时，然后它将显示 24 小时时间。
回答by 2540625
It depends on the time format of the user's operating system when the web browser was launched.
这取决于启动 Web 浏览器时用户操作系统的时间格式。
So:
所以：
- If your computer's system prefs are set to use a 24-hour clock, the browser will render the
<input type="time">element as--:--(time range: 00:00–23:59). - If you change your computer's syst prefs to use 12-hour, the output won't change until you quit and relaunch the browser. Then it will change to
--:-- --(time range: 12:00 AM – 11:59 PM).
- 如果您计算机的系统偏好设置为使用 24 小时制，则浏览器会将
<input type="time">元素呈现为--:--（时间范围：00:00–23:59）。 - 如果您将计算机的系统首选项更改为使用 12 小时，则在您退出并重新启动浏览器之前，输出不会更改。然后它将更改为
--:-- --（时间范围：12:00 AM – 11:59 PM）。
And (as of this writing), browser support is only about 75% (caniuse). Yay: Edge, Chrome, Opera, Android. Boo: IE, Firefox, Safari).
并且（在撰写本文时），浏览器支持率仅为 75% 左右（caniuse）。耶：Edge、Chrome、Opera、Android。嘘：IE、Firefox、Safari）。
回答by Jonatas Walker
If you are able/willing to use a tiny component I wrote this Timepicker — https://github.com/jonataswalker/timepicker.js— for my own needs.
如果你能够/愿意使用我编写的这个 Timepicker 的一个小组件——https: //github.com/jonataswalker/timepicker.js——满足我自己的需要。
Usage is like this:
用法是这样的：
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>回答by Dima
Support of this type is still very poor. Opera shows it in a way you want. Chrome 23 shows it with seconds and AM/PM, in 24 version (dev branch at this moment) it will rid of seconds (if possible), but no information about AM/PM.
It's not want you possibly want, but at this point the only option I see to achieve your time picker format is usage of javascript.
这种类型的支持仍然很差。Opera 以您想要的方式展示它。Chrome 23 以秒和 AM/PM 显示它，在 24 版本（此时的开发分支）中它会去掉秒（如果可能），但没有关于 AM/PM 的信息。
这不是你想要的，但在这一点上，我看到实现你的时间选择器格式的唯一选择是使用 javascript。
回答by santosh devnath
HTML provide only input type="time"If you are using bootstrap then you can use timepicker.
You can get code from this URL http://jdewit.github.io/bootstrap-timepickerMay be it will help you
HTML 仅提供input type="time"如果您使用引导程序，则可以使用 timepicker。
你可以从这个 URL http://jdewit.github.io/bootstrap-timepicker 获取代码可能会帮助你
回答by Kashyap Mukkamala
Even though you see the time in HH:MM AM/PM format, on the backend it still works in 24 hour format, you can try using some basic javascript to see that.
即使您以 HH:MM AM/PM 格式看到时间，在后端它仍然以 24 小时格式工作，您可以尝试使用一些基本的 javascript 来查看。
回答by Fenix Aoras
I know this question has been answered many times, I just propose to people that might be interested a jquery Plugin :
我知道这个问题已经回答过很多次了，我只是向可能对 jquery 插件感兴趣的人提出建议：
https://github.com/fenix92/clickClock
https://github.com/fenix92/clickClock
very basic, clear and intuitive.
非常基本、清晰和直观。
回答by Alex Kumbhani
you can try this for html side
你可以在 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 Side
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;
}
