1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <input>
  6. <input type="time">

<input type="time">

Baseline 已廣泛支援

此特性已得到良好支援，可在多種裝置和瀏覽器版本上使用。自 2021 年 4 月起，所有瀏覽器均已支援此特性。

<input> 元素的 time 型別用於建立讓使用者輕鬆輸入時間（時、分，以及可選的秒）的輸入框。

雖然控制元件的使用者介面外觀基於瀏覽器和作業系統，但功能是相同的。無論介面的輸入格式如何，其值始終是 24 小時制的 HH:mm 或 HH:mm:ss 格式的時間，並帶有前導零。

試一試

<label for="appointment">Choose a time for your meeting:</label>

<input
  type="time"
  id="appointment"
  name="appointment"
  min="09:00"
  max="18:00"
  required />

<small>Office hours are 9am to 6pm</small>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

設定 value 屬性

你可以在建立 <input> 元素時，透過在 value 屬性中包含一個有效的時間來為其設定預設值，如下所示：

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

使用 JavaScript 設定值

你還可以使用 HTMLInputElement 的 value 屬性在 JavaScript 中獲取和設定時間值，例如：

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

時間值格式

time 輸入框的 value 始終採用包含前導零的 24 小時制格式：HH:mm，無論輸入格式如何（輸入格式很可能根據使用者的區域設定或使用者代理來選擇）。如果時間包含秒（參見使用 step 屬性），則格式始終為 HH:mm:ss。你可以在時間字串中瞭解更多關於此輸入型別所用時間值的格式資訊。

在此示例中，你可以透過輸入一個時間來檢視時間輸入框的值，並觀察其之後如何變化。

首先，來看一下 HTML。我們包含了一個 label 和 input，並添加了一個 <p> 元素，其中帶有一個 <span> 來顯示 time 輸入框的值：

html
<form>
  <label for="startTime">Start time: </label>
  <input type="time" id="startTime" />
  <p>
    Value of the <code>time</code> input:
    <code>"<span id="value">n/a</span>"</code>.
  </p>
</form>

JavaScript 程式碼為時間輸入框添加了程式碼，以監聽 input 事件，該事件在輸入元素內容每次更改時觸發。當事件發生時，<span> 的內容將被替換為輸入元素的新值。

js
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
});

當包含 time 輸入框的表單提交時，該值在包含於表單資料之前會被編碼。時間輸入框的表單資料條目將始終採用 name=HH%3Amm 的形式，如果包含秒（參見使用 step 屬性），則為 name=HH%3Amm%3Ass。

附加屬性

除了所有 <input> 元素共有的屬性外，time 輸入框還提供以下屬性。

注意： 與許多資料型別不同，時間值具有週期性域，這意味著值達到最大可能值後會重新回到起始值。例如，指定 min 為 14:00，max 為 2:00，意味著允許的時間值從下午 2:00 開始，經過午夜到第二天，到凌晨 2:00 結束。更多資訊請參見本文的讓 min 和 max 跨越午夜部分。

list

列表屬性的值是位於同一文件中的 <datalist> 元素的 id。<datalist> 為此輸入提供了一個預定義值列表，以供使用者建議。列表中與 type 不相容的任何值都不會包含在建議選項中。提供的值是建議，而不是要求：使用者可以從這個預定義列表中選擇，也可以提供不同的值。

max

一個表示可接受的最晚時間的字串，以與上述時間值格式相同的格式指定。如果指定的字串不是有效的時間，則不會設定最大值。

min

一個表示可接受的最早時間的字串，以前面描述的時間值格式給出。如果指定的值不是有效的時間字串，則不會設定最小值。

readonly

一個布林屬性，如果存在，則表示該欄位不能由使用者編輯。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。

注意： 由於只讀欄位不能有值，因此 required 對同時指定了 readonly 屬性的輸入沒有影響。

step

step 屬性是一個數字，用於指定值必須遵守的粒度，或者是特殊值 any（如下所述）。只有距離步進基準為整數個步長的值才是有效的。步進基準是指定的 min 值，否則是 value 的值，如果兩者都未提供，則為 0 (00:00:00)。

對於 time 輸入框，step 的值以秒為單位，並被視為等於 step 值乘以 1000 的毫秒數（其底層數值以毫秒為單位）。預設值為 60，表示 1 分鐘。

字串值 any 意味著不暗示任何步進，允許任何值（除非有其他約束，如 min 和 max）。實際上，對於 time 輸入框，它的效果與 60 相同，因為在這種情況下，選擇器介面只允許選擇整分鐘。

注意：當用戶輸入的資料不符合步進配置時，使用者代理可能會四捨五入到最近的有效值，當有兩個同樣接近的選項時，優先選擇正方向的數字。

使用時間輸入框

時間的基本用法

<input type="time"> 最基本的用法涉及一個基礎的 <input> 和 <label> 元素的組合，如下所示：

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

控制輸入大小

<input type="time"> 不支援表單尺寸屬性，如 size，因為時間的字元長度總是大致相同。你需要藉助 CSS 來滿足尺寸調整的需求。

使用 step 屬性

你可以使用 step 屬性來改變每次遞增或遞減時間時跳躍的時間量（例如，點選小箭頭部件時，時間一次移動 10 分鐘）。

它接受一個整數值，定義了你希望遞增的秒數；預設值是 60 秒。由於這是預設值，大多數使用者代理的時間介面會顯示小時和分鐘，但不顯示秒。如果 step 屬性的值不是 60 的倍數，並且 min 或 max 值尚未導致秒的顯示，那麼包含此屬性會向介面中新增秒。

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

要以分鐘或小時為步長，請以秒為單位指定分鐘數或小時數，例如 2 分鐘為 120，2 小時為 7200。

驗證

預設情況下，<input type="time"> 不會對輸入的值進行任何驗證，除了使用者代理的介面通常不允許你輸入時間值以外的內容。這很有用，但你不能完全依賴該值是一個正確的時間字串，因為它可能是一個空字串 ("")，這是允許的。

設定最大和最小時間

你可以使用 min 和 max 屬性來限制使用者可以選擇的有效時間。在下面的例子中，我們設定了最小時間為 12:00，最大時間為 18:00：

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

這是上述示例中使用的 CSS。這裡我們利用了 :valid 和 :invalid CSS 屬性，根據當前值是否有效來為輸入框設定樣式。我們在輸入框旁邊的 <span> 上添加了一個作為生成內容的圖示。

css
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;
}

這裡的結果是：

  • 只有 12:00 到 18:00 之間的時間會被視為有效；超出該範圍的時間將被標記為無效。

讓 min 和 max 跨越午夜

透過設定一個大於 max 屬性的 min 屬性，有效的時間範圍將跨越午夜，形成一個有效的可用時間範圍。此功能是其他任何輸入型別都不支援的。

js
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";

if (input.validity.valid && input.type === "time") {
  // <input type=time> reversed range supported
} else {
  // <input type=time> reversed range unsupported
}

將時間設為必填項

此外，你可以使用 required 屬性使填寫時間成為強制性的。如果你嘗試提交一個超出設定範圍的時間或一個空的時間欄位，瀏覽器將顯示錯誤。

讓我們看一個例子；這裡我們設定了最小和最大時間，並且將該欄位設為必填項：

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

如果你嘗試提交一個不完整的時間（或超出設定範圍的時間）的表單，瀏覽器會顯示一個錯誤。現在就試試這個例子吧：

警告： HTML 表單驗證不能替代確保輸入資料格式正確的指令碼。有人很容易調整 HTML 以繞過驗證，或完全刪除它。也有可能有人完全繞過您的 HTML，直接將資料提交到您的伺服器。如果您的伺服器端程式碼未能驗證收到的資料，當提交格式不正確的資料（或資料過大、型別錯誤等）時，可能會發生災難。

示例

在此示例中，我們使用透過 <input type="time"> 建立的原生選擇器，來建立一個用於選擇時間的介面元素。

HTML

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

CSS

css
input[type="time"] {
  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;
}

結果

技術摘要

值 表示時間的字串，或為空。
事件 change 和 input
支援的常見屬性 autocomplete, list, readonly, step
IDL 屬性 list, value, valueAsDate, valueAsNumber
DOM 介面 HTMLInputElement
方法 select()、stepDown() 和 stepUp()。
隱式 ARIA 角色 沒有對應的角色

規範

規範
HTML
# time-state-(type=time)

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.