<input type="datetime-local">

Baseline 已广泛支持

此功能已成熟，并且适用于多种设备和浏览器版本。自 2021 年 10 月以来，它已在所有浏览器中可用。

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

试一试

<label for="meeting-time">Choose a time for your appointment:</label>

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

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

input,
label {
  margin: 0.4rem 0;
}

控件的 UI 通常因浏览器而异。该控件旨在表示本地日期和时间，不一定表示用户的本地日期和时间。换句话说，输入允许年、月、日、小时和分钟的任何有效组合——即使这种组合在用户的本地时区中无效（例如，夏令时春季向前过渡间隙中的一小时）。

值

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

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

html

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

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

注意：另请记住，如果此类数据通过 HTTP GET 提交，则冒号字符需要进行转义才能包含在 URL 参数中，例如 party-date=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，则步进基准为 min，否则为 value，如果两者都没有提供，则为 0（Unix 纪元，1970-01-01T00:00）。

对于 datetime-local 输入，step 的值以秒为单位，并被视为等于 step 值 1000 倍的毫秒数（底层数值以毫秒为单位）。默认值为 60，表示 1 分钟。

字符串值 any 意味着没有步进，允许任何值（除了其他约束，例如 min 和 max）。实际上，对于 datetime-local 输入，它的效果与 60 相同，因为在这种情况下，选择器 UI 只允许选择整分钟。

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

使用 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="party-date"
      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="party-date" />
</form>

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

您可以使用 min 和 max 属性来限制用户可以选择的日期/时间。在下面的示例中，我们将最小日期时间设置为 2025-06-01T08:30，将最大日期时间设置为 2025-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="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

只能选择 2025 年 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 # 本地日期和时间状态 (type=datetime-local)

浏览器兼容性

另见

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

帮助改进 MDN

了解如何贡献

本页面上次修改时间是 2025 年 7 月 20 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容的问题