time類型的<input>元素  創(chuàng)建輸入字段，允許輕松輸入時間。

控件的用戶界面從瀏覽器到瀏覽器有所不同，跨瀏覽器支持在現(xiàn)代瀏覽器中通常是很好的，只有Safari在編寫本文時不支持它。在Safari中，控件會優(yōu)雅地降低到簡單<input type="text">。

<input id="time" type="time">

在Chrome / Opera中，time控件非常簡單，可以插入小時和分鐘（24小時制）的插槽，上下箭頭可以迭代顯示的值，使用十字按鈕清空控件。

Firefox的time控制非常相似，只是它沒有上下箭頭，并且是12小時的時鐘（有一個額外的插槽來指定AM或PM）。

邊緣time控制更精細(xì)一點，打開滑動卷軸（也是24小時）的小時和分鐘選擇器：

值

DOMString表示輸入到輸入中的時間的值。您可以通過在value屬性中包含日期來為輸入設(shè)置默認(rèn)值，如下所示：

<label for="appt-time">Choose an appointment time: </label><input id="appt-time" type="time" name="appt-time" value="13:30">

需要注意的是，顯示的時間格式可能與實際情況有所不同value- 顯示的時間格式將根據(jù)用戶操作系統(tǒng)的設(shè)置區(qū)域設(shè)置進(jìn)行選擇，而日期value始終格式化hh:mm。當(dāng)上述值提交給服務(wù)器時，例如某些瀏覽器顯示為13:30，有些顯示為1.30 PM，但提交的值總是看起來像appt-time=13%3A30。

您還可以使用HTMLInputElement.value屬性在JavaScript中獲取和設(shè)置日期值，例如：

var timeControl = document.querySelector('input[type="time"]');timeControl.value = '15:30';

使用時間輸入

時間輸入乍看起來很方便 - 它們?yōu)檫x擇時間提供了一個簡單的用戶界面，并且將發(fā)送到服務(wù)器的數(shù)據(jù)格式規(guī)范化，而不管用戶的區(qū)域設(shè)置如何。但是，<input type="time">由于所有瀏覽器都無法保證瀏覽器的支持，因此存在一些問題。

我們將考慮基本的和更復(fù)雜的用途<input type="time">，然后就減輕瀏覽器支持問題提供建議（請參閱處理瀏覽器支持）。

時間的基本用法

最簡單的使用<input type="time">涉及基本<input>和<label>元素組合，如下所示：

<form>  <label for="appt-time">Choose an appointment time: </label>  <input id="appt-time" type="time" name="appt-time"></form>

控制輸入大小

<input type="time">不支持表單大小屬性，如size。你將不得不求助于CSS的大小需求。

使用步驟屬性

您可以使用該step屬性來改變時間遞增的時間量。但是，這在瀏覽器中有一些奇怪的效果，所以不完全可靠。

它需要一個整數(shù)值，等于你想增加的秒數(shù)。如果您選擇小于60秒（1分鐘）的值，則會導(dǎo)致time輸入在小時和分鐘旁邊顯示一個秒輸入?yún)^(qū)域：

<form>  <label for="appt-time">Choose an appointment time: </label>  <input id="appt-time" type="time" name="appt-time" step="2"></form>

但是，這似乎只對Chrome / Opera有效果，Chrome / Opera是唯一顯示向上/向下迭代箭頭的瀏覽器 - 點擊這些會導(dǎo)致秒的值每次迭代兩秒，但是對于小時或分鐘（如果你想迭代的分鐘或小時，你需要相當(dāng)于這些值的適當(dāng)?shù)谋稊?shù)，例如120 2分鐘，或7200 2小時）。

這些步驟的值在Firefox或Edge中似乎沒有效果。另外，它似乎會導(dǎo)致驗證無法正常工作（如下一節(jié)所述）。

驗證

默認(rèn)情況下，<input type="time">不對輸入的值應(yīng)用任何驗證。UI實現(xiàn)通常不會讓你輸入任何不是日期時間的東西 - 這很有幫助 - 但是你仍然可以不填寫日期時間并提交，或者輸入無效的日期時間（例如4月32日）。

設(shè)置最大和最小時間

您可以使用min和max屬性來限制用戶可以選擇的有效時間。在下面的例子中，我們將最小時間12:00和最大時間設(shè)置為18:00：

<form>  <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>  <input id="appt-time" type="time" name="appt-time"
         min="12:00" max="18:00">  <span class="validity"></span></form>

這是上面例子中使用的CSS。這里我們利用:valid和:invalidCSS屬性來根據(jù)當(dāng)前值是否有效來設(shè)置輸入的樣式。我們必須將圖標(biāo)放在<span>輸入旁邊，而不是輸入本身，因為在Chrome中生成的內(nèi)容放置在表單控件中，無法有效地進(jìn)行樣式化或顯示。

div {
  margin-bottom: 10px;
  position: relative;}input[type="number"] {
  width: 100px;}input + span {
  padding-right: 30px;}input:invalid+span:after {
  position: absolute;
  content: '?';
  padding-left: 5px;}input:valid+span:after {
  position: absolute;
  content: '?';
  padding-left: 5px;}

其結(jié)果是：

• 只有12:00至18:00之間的時間將被視為有效 - 超出該范圍的時間將被視為無效。

• 根據(jù)您使用的瀏覽器，您可能會發(fā)現(xiàn)超出指定值的時間甚至可能在時間選擇器（例如Edge）中無法選擇。

需要時間

此外，您可以使用該required屬性來強制填寫時間。因此，如果您嘗試提交超出設(shè)定范圍的時間或空的日期字段，支持的瀏覽器將顯示錯誤。

我們來看一個例子 - 在這里我們設(shè)置了最小和最大時間，并且還要求這個字段：

<form>  
    <div>    
        <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>    
        <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required>    
        <span class="validity"></span>
    </div>  
    <div>      
        <input type="submit" value="Submit form">  
    </div>
</form>

如果您嘗試使用不完整的日期提交表單（或者設(shè)置的界限以外的日期），則瀏覽器顯示錯誤?，F(xiàn)在嘗試玩這個例子：

這里是未使用支持瀏覽器的人的截圖：

重要說明：HTML表單驗證 不能 取代服務(wù)器端腳本，以在被允許進(jìn)入數(shù)據(jù)庫之前確保輸入的數(shù)據(jù)格式正確。有人很容易調(diào)整HTML，使他們繞過驗證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯誤等等）輸入到您的數(shù)據(jù)庫時，可能會導(dǎo)致災(zāi)難。

處理瀏覽器支持

如上所述，在編寫本文時使用時間輸入的主要問題是瀏覽器支持 -  Safari不支持在桌面上，老版本的IE不支持。

Android和iOS等移動平臺可以很好地利用這些輸入類型，提供專業(yè)的UI控件，使得在觸摸合成環(huán)境中選擇值變得非常簡單。例如，timeAndroid版Chrome 的選取器如下所示：

不支持的瀏覽器會優(yōu)雅地降級為文本輸入，但是這會在用戶界面的一致性（所呈現(xiàn)的控件將不同）和數(shù)據(jù)處理方面產(chǎn)生問題。

第二個問題是最嚴(yán)重的 - 就像我們之前提到的那樣，time輸入的實際值總是被格式化hh:mm。另一方面，使用文本輸入時，瀏覽器默認(rèn)不知道日期應(yīng)采用何種格式，人們可以通過多種方式寫入時間，例如：

• 3.00 pm

• 3:00pm

• 15:00

• 3 o'clock in the afternoon

• etc.

解決這個問題的一個方法就是pattern在time輸入中添加一個屬性。即使time輸入不使用它，文本輸入后備將會。例如，請嘗試在非支持的瀏覽器中查看以下演示：

<form>  
    <div>    
        <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>    
        <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required pattern="[0-9]{2}:[0-9]{2}">    
        <span class="validity"></span>  
    </div>  
    <div>      
        <input type="submit" value="Submit form">  
    </div>
</form>

如果您嘗試提交，則會看到非支持瀏覽器現(xiàn)在會顯示一條錯誤消息（并且如果輸入與模式不匹配，則將輸入高亮顯示為無效）nn:nn，其中n的數(shù)字為0到9.當(dāng)然，這不會阻止人們輸入無效的日期，也不會阻止格式化后的格式化日期。

用戶將要了解他們需要輸入時間和日期的模式？

我們?nèi)匀挥幸粋€問題。

目前以跨瀏覽器方式處理表單時間的最佳方法是讓用戶在單獨的控件中輸入小時數(shù)和分鐘數(shù)（如果需要，可以輸入秒數(shù)）（<select>元素正在流行 - 請參閱下面的實現(xiàn)），或使用JavaScript庫（如jQuery日期選擇器）和jQuery timepicker插件。

例子

在這個例子中，我們創(chuàng)建了兩組用于選擇時間的UI元素 - 一個使用本地輸入創(chuàng)建的本地選取器<input type="time">，以及一組兩個<select>元素，用于在不支持本機輸入的舊版瀏覽器中選擇小時/分鐘。

HTML看起來像這樣：

<form>  <div class="nativeTimePicker">    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>      <input id="appt-time" type="time" name="appt-time"
             min="12:00" max="18:00" required>      <span class="validity"></span>    </div>  <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p>  <div class="fallbackTimePicker">    <div>      <span>        <label for="hour">Hour:</label>        <select id="hour" name="hour">        </select>      </span>      <span>        <label for="minute">Minute:</label>        <select id="minute" name="minute">        </select>      </span>    </div>  </div></form>

小時和分鐘值是動態(tài)生成的。

該代碼可能會感興趣的另一部分是特征檢測碼-來檢測瀏覽器是否支持<input type="time">，我們創(chuàng)建了一個新的<input>元素，設(shè)置其type到time，然后立即檢查什么的類型設(shè)置為-不支持的瀏覽器將返回text，因為這個time類型會回到類型text。如果<input type="time">不支持，我們隱藏本地選擇器，<select>而是顯示后備選取器UI 。

// define variables
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');
// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'time';
// if it does, run the code inside the if() {} blockif(test.type === 'text') {  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';  // populate the hours and minutes dynamically  populateHours();  populateMinutes();}function populateHours() {  // populate the hours <select> with the 6 open hours of the day  for(var i = 12; i <= 18; i++) {    var option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);  }}function populateMinutes() {  // populate the minutes <select> with the 60 hours of each minute  for(var i = 0; i <= 59; i++) {    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    minuteSelect.appendChild(option);  }}// make it so that if the hour is 18, the minutes value is set to 00// — you can't select times past 18:00 function setMinutesToZero() {   if(hourSelect.value === '18') {
     minuteSelect.value = '00';   } }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;

規(guī)范

瀏覽器兼容性