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中不允许使用placeholderinput 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>