<input type="date">

試一試

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

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

input,
label {
  margin: 0.4rem 0;
}

值

一個表示在輸入中輸入的日期的字串。日期按照日期字串格式進行格式化。

你可以透過 value 屬性設定輸入的預設日期值，如下所示：

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

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

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輸入還支援以下屬性：

max

接受的最晚日期。如果輸入到元素中的value發生在此日期之後，元素將無法透過約束驗證。如果max屬性的值不是yyyy-mm-dd格式的可能日期字串，則元素沒有最大日期值。

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

min

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

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

step

step 屬性是一個數字，它指定了值必須遵守的粒度，或者特殊值 any，下文將對此進行描述。只有與步長基準相差整步長的值才有效。如果指定了 min，則步長基準是 min，否則是 value，如果兩者都沒有提供，則為 0（Unix 紀元，1970-01-01）。

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

字串值 any 意味著不指定步長，允許任何值（除了其他限制，如 min 和 max）。實際上，對於 date 輸入，它的效果與 1 相同，因為選擇器 UI 只允許選擇整天。

使用日期輸入

日期輸入提供了一個簡單的日期選擇介面，無論使用者的區域設定如何，它都將傳送到伺服器的資料格式標準化。

在本節中，我們將介紹 <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

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

CSS 如下所示：

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

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

結果

技術摘要

規範

瀏覽器相容性

另見

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