<input type="datetime-local">

<input> 元素类型为 datetime-local 创建输入控件，让用户可以轻松地输入日期和时间，包括年份、月份、日期，以及小时和分钟。

试一试

控件的 UI 在不同浏览器之间通常会有所不同。在不支持的浏览器中，这些控件将优雅地降级为简单的 <input type="text"> 控件。

该控件旨在表示本地日期和时间，而不是用户的本地日期和时间。换句话说，输入允许任何有效的年、月、日、时、分组合，即使这样的组合在用户本地时区中无效（例如，夏令时春季前移过渡期间的某个小时）。

值

表示输入中输入的日期值的字符串。此输入类型使用的日期和时间值的格式在本地日期和时间字符串中描述。

可以通过在 value 属性中包含日期和时间来设置输入的默认值，如下所示

html

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

需要注意的是，显示的日期和时间格式与实际的 value 不同；显示的日期和时间根据用户的操作系统报告的区域设置进行格式化，而日期/时间 value 始终以 YYYY-MM-DDThh:mm 格式化。例如，当以上值提交到服务器时，它将显示为 partydate=2024-06-01T08:30。

注意：还需要注意，如果此类数据通过 HTTP GET 提交，冒号字符需要进行转义才能包含在 URL 参数中，例如 partydate=2024-06-01T08%3A30。有关如何执行此操作的一种方法，请参阅 encodeURI()。

还可以使用 HTMLInputElement 的 value 属性在 JavaScript 中获取和设置日期值，例如

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

附加属性

除了所有 <input> 元素通用的属性之外，datetime-local 输入还提供了以下属性。

max

要接受的最新日期和时间。如果元素中输入的 value 晚于此时间戳，则该元素将无法通过约束验证。如果 max 属性的值不是遵循 YYYY-MM-DDThh:mm 格式的有效字符串，则该元素没有最大值。

此值必须指定一个晚于或等于 min 属性中指定的日期字符串的日期字符串。

min

要接受的最早日期和时间；早于此时间戳的时间戳将导致该元素无法通过约束验证。如果 min 属性的值不是遵循 YYYY-MM-DDThh:mm 格式的有效字符串，则该元素没有最小值。

此值必须指定一个早于或等于 max 属性中指定的日期字符串的日期字符串。

step

step 属性是一个数字，用于指定值必须遵守的粒度，或特殊值 any，该值将在下面描述。只有等于步进基础的值（如果指定了 min，则为 value，如果两者都没有，则为适当的默认值）是有效的。

any 的字符串值意味着没有隐含的步进，并且允许任何值（除了其他约束，例如 min 和 max）。

注意：当用户输入的数据不符合步进配置时，用户代理可能会舍入到最近的有效值，当有两个同样接近的选项时，它更倾向于正方向的数字。

对于 datetime-local 输入，step 的值以秒为单位，乘以 1000 的比例因子（因为底层数值以毫秒为单位）。step 的默认值为 60，表示 60 秒（或 1 分钟，或 60,000 毫秒）。

目前，对于 datetime-local 输入，在 step 中使用 any 的值意味着什么尚不清楚。一旦确定该信息，将对其进行更新。

使用 datetime-local 输入

日期/时间输入对于开发者来说很方便；它们提供了一个简单的 UI 用于选择日期和时间，并且无论用户的区域设置如何，它们都会规范发送到服务器的数据格式。但是，考虑用户很重要。不要要求用户输入对您的应用程序正常运行不需要的数据。

控制输入大小

<input type="datetime-local"> 不支持表单控件大小属性，例如 size。您必须求助于 CSS 来自定义这些元素的大小。

设置时区

datetime-local 输入类型没有提供一种方法来设置日期/时间控件的时区和/或区域设置。这在 datetime 输入类型中可用，但此类型现在已过时，已从规范中删除。删除它的主要原因是浏览器缺乏实现以及对用户界面/体验的担忧。最好只使用一个控件（或多个控件）来设置日期/时间，然后在单独的控件中处理区域设置。

例如，如果您正在创建用户可能已经登录且其区域设置已经设置的系统，则可以在 hidden 输入类型中提供时区。例如

html

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

另一方面，如果您需要允许用户在日期/时间输入中输入时区，则可以使用 <select> 元素，以便用户可以通过从一组位置中选择特定位置来设置正确的时区。

html

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

无论哪种情况，日期/时间和时区值都将作为单独的数据点提交到服务器，然后您需要在服务器端的数据库中适当地存储它们。

验证

默认情况下，<input type="datetime-local"> 不会对输入的值应用任何验证。UI 实现通常不允许您输入任何不是日期/时间的內容，这很有帮助，但用户仍然可能会填写没有值并提交，或者输入无效的日期和/或时间（例如 4 月 32 日）。

您可以使用 min 和 max 来限制可用的日期（请参阅设置最大和最小日期），并且可以使用 required 属性使填写日期/时间成为强制性。因此，支持的浏览器会在您尝试提交超出设定范围的日期或空白日期字段时显示错误。

让我们看一个例子；在这里，我们设置了最小和最大日期/时间值，并将字段设置为必需字段

html

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

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

这是上面示例中使用的 CSS。在这里，我们利用了 :valid 和 :invalid CSS 属性来根据当前值是否有效来设置输入的样式。我们将图标放在输入旁边的 <span> 上。

css

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

警告： HTML 表单验证不是替代确保输入数据格式正确的脚本。对于某人来说，对 HTML 进行调整以允许他们绕过验证或完全删除验证，这太容易了。某人也可以完全绕过您的 HTML 并直接将数据提交到您的服务器。如果您的服务器端代码未能验证它接收的数据，当提交格式不正确的数据（或数据太大、类型错误等等）时，可能会出现问题。

注意：使用 datetime-local 输入，日期值始终规范化为格式 YYYY-MM-DDThh:mm。

示例

datetime-local 的基本用法

<input type="datetime-local"> 的最简单用法包括一个基本的 <input> 和 <label> 元素组合，如下所示

html

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="partydate" />
</form>

设置最大和最小日期和时间

您可以使用 min 和 max 属性来限制用户可以选择的时间/日期。在以下示例中，我们设置了 2024-06-01T08:30 的最小日期时间和 2024-06-30T16:30 的最大日期时间

html

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2024-06-01T08:30"
    max="2024-06-30T16:30" />
</form>

只能选择 2024 年 6 月的日期。根据您使用的浏览器，可能无法选择指定值之外的时间。在其他浏览器中，无效的日期和时间可以选择，但会匹配 :invalid 和 :out-of-range，并且会失败验证。

在某些浏览器（Chrome 和 Edge）中，只有日期值的“天”部分可以编辑，并且无法滚动到 6 月以外的日期。在其他浏览器（Safari）中，日期选择器似乎允许任何日期，但选择日期时，值会被限制在有效范围内。

有效范围包括 min 和 max 值之间的所有时间；一天中的时间只在范围内的第一个和最后一个日期受到限制。

注意：您应该能够使用 step 属性来改变每次增加日期时跳过的天数（例如，也许您只希望选择星期六）。但是，在撰写本文时，这在任何实现中似乎都无法有效地工作。

技术摘要

值	表示日期和时间（以本地时区表示）的字符串，或者为空。
事件	`change` 和 `input`
支持的通用属性	`autocomplete`、`list`、`readonly`、`step`
IDL 属性	`list`、`value`、`valueAsDate`、`valueAsNumber`
DOM 接口	`HTMLInputElement`
方法	`select()`、`stepDown()`、`stepUp()`
隐式 ARIA 角色	没有相应的角色

规范

规范
HTML 标准 # local-date-and-time-state-(type=datetime-local)

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

通用的 <input> 元素以及用于操作它的接口，HTMLInputElement
<input type="date"> 和 <input type="time">
HTML 中使用的日期和时间格式
日期和时间选择器教程
CSS 属性的兼容性