<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 属性的兼容性