我正在使用带有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
答案 0 :(得分:66)
这是最简单的日期/时间相关类型,允许用户选择 24小时, AM或PM 的时间。返回的值是小时:分钟,看起来像14:30。
<input type="time" name="time" />
<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浏览器时用户操作系统的时间格式。
所以:
<input type="time">
元素呈现为--:--
(时间范围:00:00-23:59 )。 --:-- --
(时间范围:凌晨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)
答案 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>