<input type="date">

¥Value

表示输入中输入的日期的字符串。日期按照 日期字符串格式 进行格式化。

¥A string representing the date entered in the input. The date is formatted according to Date strings format.

你可以在 value 属性内使用日期为输入设置默认值，如下所示：

¥You can set a default value for the input with a date inside the value attribute, like so:

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

注意：显示的日期格式将与实际的 value 不同 - 显示的日期根据用户浏览器的区域设置进行格式化，但解析的 value 始终采用 yyyy-mm-dd 格式。

¥Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

你可以使用 HTMLInputElement value 和 valueAsNumber 属性在 JavaScript 中获取和设置日期值。例如：

¥You can get and set the date value in JavaScript with the HTMLInputElement value and valueAsNumber properties. For example:

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 日）。然后它以字符串和数字格式读回该值。

¥This code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (June 1st, 2017). It then reads that value back in string and number formats.

¥Additional attributes

所有 <input> 元素共有的属性也适用于 date 输入，但可能不会影响其表示。例如 size 和 placeholder 可能不起作用。date 输入具有以下附加属性。

¥The attributes common to all <input> elements apply to the date inputs as well, but might not influence its presentation. For example size and placeholder might not work. date inputs have the following additional attributes.

最晚接受日期。如果元素中输入的 value 之后出现，则该元素失败 约束验证。如果 max 属性的值不是 yyyy-mm-dd 格式的可能日期字符串，则该元素没有最大日期值。

¥The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value.

如果同时设置了 max 和 min 属性，则该值必须是晚于或等于 min 属性中的日期字符串。

¥If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.

最早接受日期。如果元素中输入的 value 提前出现，则该元素失败 约束验证。如果 min 属性的值不是 yyyy-mm-dd 格式的可能日期字符串，则该元素没有最小日期值。

¥The earliest date to accept. If the value entered into the element occurs beforehand, the element fails constraint validation. If the value of the min attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no minimum date value.

如果同时设置了 max 和 min 属性，则该值必须是早于或等于 max 属性中的日期字符串。

¥If both the max and min attributes are set, this value must be a date string earlier than or equal to the one in the max attribute.

step 属性是一个数字，指定值必须遵守的粒度，或者是特殊值 any，如下所述。只有等于步进基础的值（如果指定则为 min，否则为 value，如果未提供则为适当的默认值）才有效。

¥The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

字符串值 any 意味着不暗示任何步进，并且允许任何值（除非其他约束，例如 min 和 max）。

¥A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

注意：当用户输入的数据不符合步进配置时，user agent 可能会四舍五入到最接近的有效值，当有两个同样接近的选项时，优先选择正方向的数字。

¥Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

对于 date 输入，step 的值以天为单位给出；并被视为等于 86,400,000 乘以 step 值的毫秒数（基础数值以毫秒为单位）。step 默认值为 1，表示 1 天。

¥For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value (the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 day.

注意：将 any 指定为 step 的值与 date 输入的 1 具有相同的效果。

¥Note: Specifying any as the value for step has the same effect as 1 for date inputs.

¥Using date inputs

日期输入提供了一个用于选择日期的简单界面，并且它们规范了发送到服务器的数据格式，无论用户的区域设置如何。

¥Date inputs provide an easy interface for choosing dates, and they normalize the data format sent to the server regardless of the user's locale.

在本节中，我们将介绍 <input type="date"> 的基本用法和更复杂的用法。

¥In this section, we'll look at basic and then more complex uses of <input type="date">.

¥Basic uses of date

<input type="date"> 最简单的用法是将一个 <input> 与其 <label> 结合起来，如下所示：

¥The simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below:

<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。

¥This HTML submits the entered date under the key bday to https://example.com — resulting in a URL like https://example.com/?bday=1955-06-08.

¥Setting maximum and minimum dates

你可以使用 min 和 max 属性来限制用户可以选择的日期。在以下示例中，我们设置最小日期为 2017-04-01，最大日期为 2017-04-30：

¥You can use the min and max attributes to restrict the dates that can be chosen by the user. In the following example, we set a minimum date of 2017-04-01 and a maximum date of 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 月以外的日期。

¥The result is that only days in April 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside April 2017 can't be selected in the picker widget.

你可以使用 step 属性来改变每次日期递增时跳过的天数（例如，仅使星期六可选）。

¥You can use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make Saturdays selectable).

¥Controlling input size

<input type="date"> 不支持 size 等表单大小调整属性。首选 CSS 来确定尺码。

¥<input type="date"> doesn't support form sizing attributes such as size. Prefer CSS for sizing it.

¥Validation

默认情况下，<input type="date"> 不会验证超出其格式的输入值。界面通常不允许你输入任何非日期的内容 - 这很有帮助。

¥By default, <input type="date"> doesn't validate the entered value beyond its format. The interfaces generally don't let you enter anything that isn't a date — which is helpful.

如果你使用 min 和 max 来限制可用日期（参见 设置最大和最小日期），表单控件将禁用无效日期，如果你尝试提交超出范围的日期，则会显示错误。

¥If you use min and max to restrict the available dates (see Setting maximum and minimum dates), the form control disables invalid dates, and will display an error if you try to submit a date that is out of bounds.

你还可以使用 required 属性强制填写日期 - 如果你尝试提交空日期字段，则会显示错误。

¥You can also use the required attribute to make filling in the date mandatory — an error will be displayed if you try to submit an empty date field.

让我们看一个最小和最大日期的示例，并且还设置了一个必填字段：

¥Let's look at an example of minimum and maximum dates, and also made a field 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>

如果你尝试提交日期不完整（或日期超出设定范围）的表单，浏览器会显示错误。现在尝试使用示例：

¥If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

这是上面示例中使用的 CSS。我们利用 :valid 和 :invalid pseudo-elements 根据当前值是否有效在输入旁边添加一个图标。我们必须将图标放在输入旁边的 <span> 上，而不是输入本身，因为在 Chrome 中，至少输入生成的内容放置在表单控件内，并且无法有效设置样式或显示。

¥Here's the CSS used in the above example. We make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether the current value is valid. We had to put the icon on a <span> next to the input, not on the input itself, because in Chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively.

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

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

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

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

警告：客户端表单验证不能替代服务器上的验证。有人很容易修改 HTML，或者完全绕过你的 HTML 并将数据直接提交到你的服务器。如果你的服务器无法验证接收到的数据，则可能会因格式错误、太大、类型错误等数据而遭受灾难。

¥Warning: Client-side form validation is not a substitute for validating on the server. It's easy for someone to modify the HTML, or bypass your HTML entirely and submit the data directly to your server. If your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc.

¥Examples

在此示例中，我们使用原生 <input type="date"> 选择器创建日期选择器。

¥In this example, we create a date picker using the native <input type="date"> picker.

HTML 看起来像这样：

¥The HTML looks like so:

<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 如下所示：

¥The CSS looks like so:

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

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

¥Results

¥Technical summary

¥See also

• 通用 <input> 元素和用于操作它的界面，HTMLInputElement
• 日期和时间选择器教程
• HTML 中使用的日期和时间格式
• CSS 属性的兼容性