HTML5<input> 标签类型=“时间”

Question

我使用这样的 html5 输入标签：

<input type="time" name="usr_time" value="19:47:13">

但是当我提交时它是无效的值。 此外，我无法更改该框中的第二个，它已禁用。 有人可以解释一下吗？

Answer 1

尝试设置step属性。 如果不够详细，还可以为其使用浮点值。

<input type="time" step="1" />

http://www.w3.org/TR/html-markup/input.time.html

Answer 2

<input type="time" name="usr_time" value="19:47:AM/PM"> 

此处为value="1:47:AM"因此您无法更改秒，它采用12小时格式，如果我们如上所述添加step = 1，则为value="1:47:55:AM" 。

Answer 3

由于这（目前）仅在MS Edge和Chrome中受支持，因此我编写了一个很小的组件-Timepicker ，您可以轻松地将其用于主要浏览器。

用法是这样的：

 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 4

 //Try this code for calculating the hourly based veges for an employee.
<script>

var app = angular.module('App', []);
app.controller('Ctrl', function ($scope) {

});
</script>

<div data-ng-app="App" data-ng-controller="Ctrl">

<div class="form-group" >
<label>Start Time</label>
<input type="time"  id="txtStart"   runat="server"  step=0 ng-model="StartTime" class="form-control" />
</div>
<div class="form-group">
<label>End Time</label>
<input type="time" id="txtend"  step=0 runat="server" required ng-model="EndTime" class="form-control"
 </div>
<div class="form-group">
        <label>Rate Level</label>

<input type="text" id="txtRate" runat="server"
               required ng-model="Rate" class="form-control">
</div>

<div class="form-group">
<label>Estimate</label>
<input type="text" id="txtEstimate"value="{{Rate *((EndTime- StartTime) /3600000)}}" runat="server" class="form-control">
</div>
</div>