<input type="time">
<input> 元素的 time 类型用于创建让用户轻松输入时间（时、分，以及可选的秒）的输入框。
虽然控件的用户界面外观基于浏览器和操作系统，但功能是相同的。无论界面的输入格式如何，其值始终是 24 小时制的 HH:mm 或 HH:mm:ss 格式的时间，并带有前导零。
试一试
<label for="appointment">Choose a time for your meeting:</label>
<input
type="time"
id="appointment"
name="appointment"
min="09:00"
max="18:00"
required />
<small>Office hours are 9am to 6pm</small>
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
设置 value 属性
你可以在创建 <input> 元素时，通过在 value 属性中包含一个有效的时间来为其设置默认值，如下所示：
<label for="appointment-time">Choose an appointment time: </label>
<input
id="appointment-time"
type="time"
name="appointment-time"
value="13:30" />
使用 JavaScript 设置值
你还可以使用 HTMLInputElement 的 value 属性在 JavaScript 中获取和设置时间值，例如：
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";
时间值格式
time 输入框的 value 始终采用包含前导零的 24 小时制格式：HH:mm，无论输入格式如何（输入格式很可能根据用户的区域设置或用户代理来选择）。如果时间包含秒（参见使用 step 属性），则格式始终为 HH:mm:ss。你可以在时间字符串中了解更多关于此输入类型所用时间值的格式信息。
在此示例中，你可以通过输入一个时间来查看时间输入框的值，并观察其之后如何变化。
首先，来看一下 HTML。我们包含了一个 label 和 input，并添加了一个 <p> 元素，其中带有一个 <span> 来显示 time 输入框的值：
<form>
<label for="startTime">Start time: </label>
<input type="time" id="startTime" />
<p>
Value of the <code>time</code> input:
<code>"<span id="value">n/a</span>"</code>.
</p>
</form>
JavaScript 代码为时间输入框添加了代码，以监听 input 事件，该事件在输入元素内容每次更改时触发。当事件发生时，<span> 的内容将被替换为输入元素的新值。
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");
startTime.addEventListener("input", () => {
valueSpan.innerText = startTime.value;
});
当包含 time 输入框的表单提交时，该值在包含于表单数据之前会被编码。时间输入框的表单数据条目将始终采用 name=HH%3Amm 的形式，如果包含秒（参见使用 step 属性），则为 name=HH%3Amm%3Ass。
附加属性
除了所有 <input> 元素共有的属性外，time 输入框还提供以下属性。
注意： 与许多数据类型不同，时间值具有周期性域，这意味着值达到最大可能值后会重新回到起始值。例如，指定 min 为 14:00，max 为 2:00，意味着允许的时间值从下午 2:00 开始，经过午夜到第二天，到凌晨 2:00 结束。更多信息请参见本文的让 min 和 max 跨越午夜部分。
list
列表属性的值是位于同一文档中的 <datalist> 元素的 id。<datalist> 为此输入提供了一个预定义值列表，以供用户建议。列表中与 type 不兼容的任何值都不会包含在建议选项中。提供的值是建议，而不是要求：用户可以从这个预定义列表中选择，也可以提供不同的值。
max
一个表示可接受的最晚时间的字符串，以与上述时间值格式相同的格式指定。如果指定的字符串不是有效的时间，则不会设置最大值。
min
一个表示可接受的最早时间的字符串，以前面描述的时间值格式给出。如果指定的值不是有效的时间字符串，则不会设置最小值。
readonly
一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。
注意： 由于只读字段不能有值，因此 required 对同时指定了 readonly 属性的输入没有影响。
step
step 属性是一个数字，用于指定值必须遵守的粒度，或者是特殊值 any（如下所述）。只有距离步进基准为整数个步长的值才是有效的。步进基准是指定的 min 值，否则是 value 的值，如果两者都未提供，则为 0 (00:00:00)。
对于 time 输入框，step 的值以秒为单位，并被视为等于 step 值乘以 1000 的毫秒数（其底层数值以毫秒为单位）。默认值为 60，表示 1 分钟。
字符串值 any 意味着不暗示任何步进，允许任何值（除非有其他约束，如 min 和 max）。实际上，对于 time 输入框，它的效果与 60 相同，因为在这种情况下，选择器界面只允许选择整分钟。
注意：当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最近的有效值，当有两个同样接近的选项时，优先选择正方向的数字。
使用时间输入框
时间的基本用法
<input type="time"> 最基本的用法涉及一个基础的 <input> 和 <label> 元素的组合，如下所示：
<form>
<label for="appointment-time">Choose an appointment time: </label>
<input id="appointment-time" type="time" name="appointment-time" />
</form>
控制输入大小
<input type="time"> 不支持表单尺寸属性，如 size，因为时间的字符长度总是大致相同。你需要借助 CSS 来满足尺寸调整的需求。
使用 step 属性
你可以使用 step 属性来改变每次递增或递减时间时跳跃的时间量（例如，点击小箭头部件时，时间一次移动 10 分钟）。
它接受一个整数值，定义了你希望递增的秒数；默认值是 60 秒。由于这是默认值，大多数用户代理的时间界面会显示小时和分钟，但不显示秒。如果 step 属性的值不是 60 的倍数，并且 min 或 max 值尚未导致秒的显示，那么包含此属性会向界面中添加秒。
<form>
<label for="appointment-time">Choose an appointment time: </label>
<input id="appointment-time" type="time" name="appointment-time" step="2" />
</form>
要以分钟或小时为步长，请以秒为单位指定分钟数或小时数，例如 2 分钟为 120，2 小时为 7200。
验证
默认情况下，<input type="time"> 不会对输入的值进行任何验证，除了用户代理的界面通常不允许你输入时间值以外的内容。这很有用，但你不能完全依赖该值是一个正确的时间字符串，因为它可能是一个空字符串 ("")，这是允许的。
设置最大和最小时间
你可以使用 min 和 max 属性来限制用户可以选择的有效时间。在下面的例子中，我们设置了最小时间为 12:00，最大时间为 18:00：
<form>
<label for="appointment-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appointment-time"
type="time"
name="appointment-time"
min="12:00"
max="18:00" />
<span class="validity"></span>
</form>
这是上述示例中使用的 CSS。这里我们利用了 :valid 和 :invalid CSS 属性，根据当前值是否有效来为输入框设置样式。我们在输入框旁边的 <span> 上添加了一个作为生成内容的图标。
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
这里的结果是：
- 只有 12:00 到 18:00 之间的时间会被视为有效；超出该范围的时间将被标记为无效。
让 min 和 max 跨越午夜
通过设置一个大于 max 属性的 min 属性，有效的时间范围将跨越午夜，形成一个有效的可用时间范围。此功能是其他任何输入类型都不支持的。
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";
if (input.validity.valid && input.type === "time") {
// <input type=time> reversed range supported
} else {
// <input type=time> reversed range unsupported
}
将时间设为必填项
此外，你可以使用 required 属性使填写时间成为强制性的。如果你尝试提交一个超出设定范围的时间或一个空的时间字段，浏览器将显示错误。
让我们看一个例子；这里我们设置了最小和最大时间，并且将该字段设为必填项：
<form>
<div>
<label for="appointment-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appointment-time"
type="time"
name="appointment-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Submit form" />
</div>
</form>
如果你尝试提交一个不完整的时间（或超出设定范围的时间）的表单，浏览器会显示一个错误。现在就试试这个例子吧：
警告： HTML 表单验证不能替代确保输入数据格式正确的脚本。有人很容易调整 HTML 以绕过验证，或完全删除它。也有可能有人完全绕过您的 HTML，直接将数据提交到您的服务器。如果您的服务器端代码未能验证收到的数据，当提交格式不正确的数据（或数据过大、类型错误等）时，可能会发生灾难。
示例
在此示例中，我们使用通过 <input type="time"> 创建的原生选择器，来创建一个用于选择时间的界面元素。
HTML
<form>
<label for="appointment-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appointment-time"
type="time"
name="appointment-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span>
</form>
CSS
input[type="time"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
结果
技术摘要
| 值 | 表示时间的字符串，或为空。 |
| 事件 |
change 和 input |
| 支持的常见属性 |
autocomplete, list, readonly, step |
| IDL 属性 |
list, value, valueAsDate, valueAsNumber |
| DOM 接口 | HTMLInputElement |
| 方法 |
select()、stepDown() 和 stepUp()。 |
| 隐式 ARIA 角色 | 没有对应的角色 |
规范
| 规范 |
|---|
| HTML # time-state-(type=time) |
浏览器兼容性
加载中…