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小時內的格式和如果我們添加步驟= 1作爲然後value="1:47:55:AM"如上所述。

Answer 3

因爲這是唯一的（這個時候）在MS邊緣和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>