<input type="date">

表示在輸入中輸入的日期的字串。日期根據日期字串格式 進行格式化。

可以使用 value 屬性中的日期設定輸入的預設值，如下所示

<input type="date" value="2017-06-01" />

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

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

此程式碼查詢第一個 type 為 date 的 <input> 元素，並將它的值設定為 2017-06-01（2017 年 6 月 1 日）。然後它以字串和數字格式讀取該值。

所有 <input> 元素共有的屬性也適用於 date 輸入，但可能不會影響它的呈現。例如 size 和 placeholder 可能不起作用。date 輸入具有以下附加屬性。

要接受的最新日期。如果在元素中輸入的 value 之後發生，則元素將失敗約束驗證。如果 max 屬性的值不是 yyyy-mm-dd 格式的可能的日期字串，則該元素沒有最大日期值。

如果同時設定了 max 和 min 屬性，則此值必須是 晚於或等於 min 屬性中的值的日期字串。

要接受的最早日期。如果在元素中輸入的 value 之前發生，則元素將失敗約束驗證。如果 min 屬性的值不是 yyyy-mm-dd 格式的可能的日期字串，則該元素沒有最小日期值。

如果同時設定了 max 和 min 屬性，則此值必須是 早於或等於 max 屬性中的值的日期字串。

step 屬性是一個數字，它指定值必須遵循的粒度，或者特殊值 any，將在下面說明。只有等於步進基礎的值（如果指定則為 min，否則為 value，如果兩者都沒有提供則為適當的預設值）才是有效的。

any 的字串值表示沒有暗示步進，任何值都是允許的（除了其他約束，例如 min 和 max）。

對於 date 輸入，step 的值以天為單位給出；並被視為等於 86,400,000 乘以 step 值的毫秒數（底層數值以毫秒為單位）。step 的預設值為 1，表示 1 天。

日期輸入提供了選擇日期的簡單介面，並且它們規範化傳送到伺服器的資料格式，無論使用者所在區域設定如何。

在本節中，我們將介紹 <input type="date"> 的基本用法和更復雜的用法。

<input type="date"> 最簡單的用法包括一個 <input> 以及它的 <label>，如下所示

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

此 HTML 將輸入的日期以 bday 為鍵提交到 https://example.com - 生成類似 https://example.com/?bday=1955-06-08 的 URL。

可以使用 min 和 max 屬性來限制使用者可以選擇的日期。在以下示例中，我們設定了 2017-04-01 的最小日期和 2017-04-30 的最大日期

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

結果是，只能選擇 2017 年 4 月的日期 - 文字框的月份和年份部分將不可編輯，並且選擇器小部件中無法選擇 2017 年 4 月以外的日期。

您可以使用 step 屬性來改變每次日期遞增時跳過的天數（例如，只選擇星期六）。

<input type="date"> 不支援表單大小屬性，例如 size。建議使用 CSS 對其進行大小調整。

預設情況下，<input type="date"> 不會驗證輸入的值是否超出其格式。這些介面通常不允許您輸入任何不是日期的內容 - 這很有幫助。

如果您使用 min 和 max 來限制可用的日期（參見 設定最大和最小日期），表單控制元件將停用無效日期，並且如果您嘗試提交超出範圍的日期，將會顯示錯誤。

您還可以使用 required 屬性來使填寫日期成為強制性 - 如果您嘗試提交一個空的日期欄位，將會顯示錯誤。

讓我們來看一個最小和最大日期的例子，並且還將一個欄位設為必填項

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>

如果您嘗試提交帶有不完整日期的表單（或超出設定範圍的日期），瀏覽器將顯示錯誤。現在嘗試玩一下這個例子。

以下是上面示例中使用的 CSS。我們利用 :valid 和 :invalid 偽元素 來在輸入旁邊新增一個圖示，根據當前值是否有效來判斷。我們必須將圖示放在輸入旁邊的 <span> 上，而不是輸入本身，因為至少在 Chrome 中，輸入的生成內容被放置在表單控制元件內部，無法有效地進行樣式化或顯示。

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

在這個示例中，我們使用原生 <input type="date"> 選擇器建立了一個日期選擇器。

HTML 程式碼如下

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS 程式碼如下

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

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