html5时间输入显示12小时

时间：2012-11-23 04:21:43

标签： html html5

我正在使用带有type=time的html 5输入元素。问题是它显示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>

样本

这是jsfiddle

11 个答案:

答案 0 :(得分：66)

HTML5时间输入

这是最简单的日期/时间相关类型，允许用户选择 24小时， AM或PM 的时间。返回的值是小时：分钟，看起来像14:30。

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

此功能仍在草稿中。每个浏览器都以不同的方式显示它。

- Opera（Presto Engine）以正确的方式显示它。
- Chrome（Webkit Engine）在上午/下午显示它。
- Firefox（Gecko Engine）没有显示任何内容，但验证了。
- Edge在弹出窗口类型窗口中显示所有必需值

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

使用不是一个好主意！

答案 1 :(得分：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属性的浏览器上的正确性。

答案 2 :(得分：8)

它取决于您当地的系统时间设置，24小时后会显示24小时。

答案 3 :(得分：8)

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

所以：

  • 如果您的计算机系统首选项设置为使用24小时制，则浏览器会将<input type="time">元素呈现为--:--（时间范围：00：00-23：59 ）。
  • 如果您将计算机的系统首选项更改为使用12小时，则输出将不会更改，直到您退出并重新启动浏览器。然后它将变为--:-- --（时间范围：凌晨12:00 - 晚上11:59）。

而且（截至撰写本文时），浏览器支持率仅为75％左右（caniuse）。 Yay：Edge，Chrome，Opera，Android。 Boo：IE，Firefox，Safari）。

答案 4 :(得分：3)

如果您能够/愿意使用一个微小的组件，我会根据自己的需要编写此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>

答案 5 :(得分：2)

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

答案 6 :(得分：1)

HTML仅提供input type="time"如果您使用的是bootstrap，则可以使用timepicker。 You can get code from this URL http://jdewit.github.io/bootstrap-timepicker可能会帮助你

答案 7 :(得分：0)

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

答案 8 :(得分：0)

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

https://github.com/fenix92/clickClock

非常基本，清晰和直观。

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

答案 9 :(得分：-1)

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

答案 10 :(得分：-1)

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

相关问题
最新问题