<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 中使用的日期和时间格式