<input type="datetime-local">

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

試一試

控制元件的 UI 在不同瀏覽器之間通常會有所不同。在不支援的瀏覽器中，這些控制元件將優雅地降級為簡單的 <input type="text"> 控制元件。

該控制元件旨在表示本地日期和時間，而不是使用者的本地日期和時間。換句話說，輸入允許任何有效的年、月、日、時、分組合，即使這樣的組合在使用者本地時區中無效（例如，夏令時春季前移過渡期間的某個小時）。

值

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

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

html

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

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

注意：還需要注意，如果此類資料透過 HTTP GET 提交，冒號字元需要進行轉義才能包含在 URL 引數中，例如 partydate=2024-06-01T08%3A30。有關如何執行此操作的一種方法，請參閱 encodeURI()。

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

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，則為 value，如果兩者都沒有，則為適當的預設值）是有效的。

any 的字串值意味著沒有隱含的步進，並且允許任何值（除了其他約束，例如 min 和 max）。

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

對於 datetime-local 輸入，step 的值以秒為單位，乘以 1000 的比例因子（因為底層數值以毫秒為單位）。step 的預設值為 60，表示 60 秒（或 1 分鐘，或 60,000 毫秒）。

目前，對於 datetime-local 輸入，在 step 中使用 any 的值意味著什麼尚不清楚。一旦確定該資訊，將對其進行更新。

使用 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="partydate"
      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="partydate" />
</form>

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

您可以使用 min 和 max 屬性來限制使用者可以選擇的時間/日期。在以下示例中，我們設定了 2024-06-01T08:30 的最小日期時間和 2024-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="partydate"
    min="2024-06-01T08:30"
    max="2024-06-30T16:30" />
</form>

只能選擇 2024 年 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 標準 # local-date-and-time-state-(type=datetime-local)

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

通用的 <input> 元素以及用於操作它的介面，HTMLInputElement
<input type="date"> 和 <input type="time">
HTML 中使用的日期和時間格式
日期和時間選擇器教程
CSS 屬性的相容性