如何更改<input>的时间格式（12/24小时）？

Question 1

我正在使用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>

展开摘要

Question 2

HTML5时间输入

这是与日期/时间相关的类型中最简单的一种，它允许用户通常在用户的操作系统区域设置下选择24/12小时制的时间。返回的值为24hhours:minutes格式，类似于14:30。

有关更多详细信息，包括每个浏览器的外观，请参见 MDN。

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

展开摘要

Question 3

通过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，这些JavaScript会在pattern本身不支持该属性的浏览器上检查输入的正确性。

Question 4

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

Question 5

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

所以：

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

并且（在撰写本文时），浏览器支持仅为75％（caniuse）。是：Edge，Chrome，Opera，Android。Boo：IE，Firefox，Safari）。

Question 6

如果您能够/愿意使用一个很小的组件，那么我可以编写此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>

展开摘要

Question 7

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

Question 8

HTML仅提供input type="time"如果您使用引导程序，则可以使用时间选择器。您可以从此URL获取代码http://jdewit.github.io/bootstrap-timepicker 也许会对您有所帮助

Question 9

即使您以HH：MM AM / PM格式查看时间，但在后端仍可以24小时制运行，但您可以尝试使用一些基本的JavaScript来查看。

Question 10

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

https://github.com/fenix92/clickClock

非常基本，清晰和直观。

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

Question 11

您可以尝试使用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;
 }

Question 12

简单的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>

展开摘要