html - 如何更改时间格式（12/24 小时）?

Question

我将 HTML5 输入元素与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>

Answer 1

HTML5 时间输入

这是最简单的日期/时间相关类型，允许用户选择 24/12 小时制的时间，通常取决于用户的操作系统区域设置。返回的值采用 24 小时hours:minutes格式，类似于14:30.

更多细节，包括每个浏览器的外观，可以在MDN上找到。

<input type="time" name="time">

Answer 2

通过 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属性的浏览器上的输入是否正确。

Answer 3

它取决于您的语言环境系统时间设置，设为 24 小时，然后它会显示 24 小时时间。

Answer 4

这取决于启动 Web 浏览器时用户操作系统的时间格式。

所以：

• 如果您的计算机系统偏好设置为使用 24 小时制，浏览器会将<input type="time">元素呈现为--:--（时间范围：00:00–23:59）。
• 如果您将计算机的系统偏好更改为使用 12 小时，则在您退出并重新启动浏览器之前，输出不会改变。然后它将更改为--:-- --（时间范围：12:00 AM - 11:59 PM）。

而且（在撰写本文时），浏览器支持率仅为 75% 左右（caniuse）。耶：Edge、Chrome、Opera、Android。嘘：IE、Firefox、Safari）。

Answer 5

如果你能够/愿意使用我写的这个 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>

Answer 6

这种类型的支持仍然很差。Opera 以您想要的方式显示它。Chrome 23 以秒和 AM/PM 显示它，在 24 版本（此时为开发分支）中，它将消除秒（如果可能），但没有关于 AM/PM 的信息。
这不是您可能想要的，但在这一点上，我看到实现您的时间选择器格式的唯一选择是使用 javascript。

Answer 7

HTML 仅提供input type="time"如果您使用的是引导程序，那么您可以使用 timepicker。您可以从这个 URL http://jdewit.github.io/bootstrap-timepicker获取代码 可能会对您有所帮助

Answer 8

即使您看到 HH:MM AM/PM 格式的时间，在后端它仍然以 24 小时格式工作，您可以尝试使用一些基本的 javascript 来查看。

Answer 9

我知道这个问题已经回答了很多次，我只是向可能对 jquery Plugin 感兴趣的人提出建议：

https://github.com/fenix92/clickClock

非常基本，清晰和直观。

（演示：http ://www.clamart-natation.com/clickclock/ ）

Answer 10

你可以试试这个 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;
 }

Answer 11

简单的 HTML 技巧来得到这个：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" >
                       
                        <div class="col-md-6">
                             <div class="row">
                                <div class="col-md-4" >
                                       <label for="hours">Hours</label>
          <select class="form-control" required>
                <option>  </option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
                <option value="6"> 6 </option>
                <option value="7"> 7 </option>
                <option value="8"> 8 </option>
                <option value="9"> 9 </option>
                <option value="10"> 10 </option>
                <option value="11"> 11 </option>
                <option value="12"> 12 </option>
              </select>
             </div>
                <div class="col-md-4" >
                      <label for="minutes">Minutes</label>
              <select class="form-control" required="">
                <option selected disabled>  </option>
                <option value="00"> 00 </option>
                <option value="10"> 10 </option>
                <option value="20"> 20 </option>
                <option value="30"> 30 </option>
                <option value="40"> 40 </option>
                <option value="50"> 50 </option>
              </select>
             </div>
                 <div class="col-md-4" >
                       <label for="hours">Select Meridiem</label>
              <select class="form-control" required="" >
                <option selected="" value="AM"> AM </option>
                <option value="PM"> PM </option>
              </select>
              </div>
             </div></div>
                    </div>