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

<input type="datetime-local">

Baseline 已廣泛支援

此功能已成熟，並且適用於多種裝置和瀏覽器版本。自 2021 年 10 月以來，它已在所有瀏覽器中可用。

型別為 datetime-local 的 <input> 元素會建立輸入控制元件，讓使用者可以輕鬆輸入日期和時間，包括年、月、日以及小時和分鐘。

試一試

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

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

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

input,
label {
  margin: 0.4rem 0;
}

控制元件的 UI 通常因瀏覽器而異。該控制元件旨在表示本地日期和時間，不一定表示使用者的本地日期和時間。換句話說，輸入允許年、月、日、小時和分鐘的任何有效組合——即使這種組合在使用者的本地時區中無效（例如，夏令時春季向前過渡間隙中的一小時）。

值

一個字串，表示輸入中輸入的日期值。此輸入型別使用的日期和時間值的格式在本地日期和時間字串中描述。

您可以透過在 value 屬性中包含日期和時間來為輸入設定預設值，如下所示：

html
<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

需要注意的一點是，顯示的日期和時間格式與實際的 value 不同；顯示的日期和時間根據使用者作業系統報告的區域設定進行格式化，而日期/時間 value 始終格式化為 YYYY-MM-DDTHH:mm。例如，當上述值提交到伺服器時，它將顯示為 party-date=2024-06-01T08:30。

注意：另請記住，如果此類資料透過 HTTP GET 提交，則冒號字元需要進行轉義才能包含在 URL 引數中，例如 party-date=2024-06-01T08%3A30。有關實現此目的的一種方法，請參閱 encodeURI()。

您還可以使用 HTMLInputElement 的 value 屬性在 JavaScript 中獲取和設定日期值，例如：

js
const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

附加屬性

除了所有 <input> 元素共有的屬性之外，datetime-local 輸入還提供以下屬性。

max

要接受的最晚日期和時間。如果輸入到元素中的 value 晚於此時間戳，則元素將未能透過約束驗證。如果 max 屬性的值不是遵循 YYYY-MM-DDTHH:mm 格式的有效字串，則元素沒有最大值。

此值必須指定一個晚於或等於 min 屬性指定日期的日期字串。

min

要接受的最早日期和時間；早於此時間戳將導致元素未能透過約束驗證。如果 min 屬性的值不是遵循 YYYY-MM-DDTHH:mm 格式的有效字串，則元素沒有最小值。

此值必須指定一個早於或等於 max 屬性指定日期的日期字串。

step

step 屬性是一個數字，它指定了值必須遵循的粒度，或者特殊值 any（如下所述）。只有距離步進基準的整數倍數的值才有效。如果指定了 min，則步進基準為 min，否則為 value，如果兩者都沒有提供，則為 0（Unix 紀元，1970-01-01T00:00）。

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

字串值 any 意味著沒有步進，允許任何值（除了其他約束，例如 min 和 max）。實際上，對於 datetime-local 輸入，它的效果與 60 相同，因為在這種情況下，選擇器 UI 只允許選擇整分鐘。

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

使用 datetime-local 輸入

日期/時間輸入對開發者來說很方便；它們提供了一個簡單的 UI 來選擇日期和時間，並且無論使用者的區域設定如何，它們都將傳送到伺服器的資料格式標準化。但是，考慮您的使用者很重要。不要要求您的使用者輸入應用程式不需要的資料。

控制輸入大小

<input type="datetime-local"> 不支援表單控制元件大小屬性，例如 size。您必須使用 CSS 來自定義這些元素的大小。

設定時區

datetime-local 輸入型別不提供的一種功能是設定日期/時間控制元件的時區和/或區域設定的方法。這在 datetime 輸入型別中可用，但此型別現已廢棄，已從規範中刪除。刪除它的主要原因是瀏覽器缺乏實現以及對使用者介面/體驗的擔憂。更簡單的方法是隻使用一個控制元件（或多個控制元件）來設定日期/時間，然後在一個單獨的控制元件中處理區域設定。

例如，如果您正在建立一個使用者可能已經登入且其區域設定已設定的系統，則可以在 hidden 輸入型別中提供時區。例如：

html
<input type="hidden" id="timezone" name="timezone" value="-08:00" />

另一方面，如果您需要允許使用者輸入時區以及日期/時間輸入，您可以使用 <select> 元素，透過從一組位置中選擇特定位置來讓使用者設定正確的時區

html
<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

無論哪種情況，日期/時間和時區值都將作為單獨的資料點提交到伺服器，然後您需要在伺服器端資料庫中適當地儲存它們。

驗證

預設情況下，<input type="datetime-local"> 不對輸入的值應用任何驗證。UI 實現通常不允許您輸入任何不是日期/時間的內容——這很有幫助——但使用者仍然可能不填寫任何值並提交，或者輸入無效的日期和/或時間（例如，4 月 32 日）。

您可以使用 min 和 max 來限制可用日期（請參閱設定最大和最小日期），您可以使用 required 屬性來使填寫日期/時間成為強制性的。因此，如果您嘗試提交超出設定範圍的日期或空日期欄位，瀏覽器將顯示錯誤。

我們來看一個例子；這裡我們設定了最小和最大日期/時間值，並使該欄位為必填項

html
<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

如果您嘗試提交不完整的日期（或超出設定範圍的日期）的表單，瀏覽器將顯示錯誤。現在嘗試使用示例

這是上述示例中使用的 CSS。在這裡，我們利用 :valid 和 :invalid CSS 屬性根據當前值是否有效來設定輸入樣式。我們將圖示放在輸入旁邊的 <span> 上。

css
div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

警告：HTML 表單驗證不能替代確保輸入資料格式正確的指令碼。有人很容易對 HTML 進行調整，從而繞過驗證，或完全刪除它。也有可能有人完全繞過您的 HTML 並直接向您的伺服器提交資料。如果您的伺服器端程式碼未能驗證收到的資料，當提交格式不正確的資料（或資料過大、型別錯誤等）時，就會出現問題。

注意：對於 datetime-local 輸入，日期值始終標準化為 YYYY-MM-DDTHH:mm 格式。

示例

datetime-local 的基本用法

<input type="datetime-local"> 最基本的用法涉及基本的 <input> 和 <label> 元素組合，如下所示

html
<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="party-date" />
</form>

設定最大和最小日期和時間

您可以使用 min 和 max 屬性來限制使用者可以選擇的日期/時間。在下面的示例中，我們將最小日期時間設定為 2025-06-01T08:30，將最大日期時間設定為 2025-06-30T16:30

html
<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
    id="party"
    type="datetime-local"
    name="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

只能選擇 2025 年 6 月的日期。根據您使用的瀏覽器，指定值之外的時間可能無法選擇。在其他瀏覽器中，無效的日期和時間是可選擇的，但將匹配 :invalid 和 :out-of-range 並將未能透過驗證。

在某些瀏覽器（Chrome 和 Edge）中，日期值中只有“天”部分可編輯，並且 6 月份之外的日期無法滾動。在其他瀏覽器（Safari）中，日期選擇器似乎允許任何日期，但當選擇日期時，值將被限制在有效範圍內。

有效範圍包括 min 和 max 值之間的所有時間；一天中的時間僅在範圍內的第一個和最後一個日期受到限制。

注意：您應該能夠使用 step 屬性來改變每次遞增日期時跳過的天數（例如，您可能只想選擇週六）。但是，在撰寫本文時，這似乎在任何實現中都無法有效工作。

技術摘要

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

規範

規範
HTML
# 本地日期和時間狀態 (type=datetime-local)

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面上次修改時間是 ，由 MDN 貢獻者完成。

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