<input type="time">
类型为time的<input>元素创建旨在让用户轻松输入时间（小时和分钟，以及可选的秒数）的输入字段。
虽然控件的用户界面外观基于浏览器和操作系统，但功能是相同的。无论 UI 的输入格式如何，值始终是 24 小时制 hh:mm 或 hh:mm:ss 格式的时间，并带有前导零。
试一试
设置 value 属性
您可以通过在创建 <input> 元素时在value属性中包含有效时间来设置输入的默认值，如下所示
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-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。这很简单，标签和输入与我们之前看到的相同，但添加了一个带有<span>的<p>元素来显示 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;
},
false,
);
当提交包含 time 输入的表单时，值将在包含在表单数据中之前进行编码。时间输入的表单数据条目将始终采用 name=hh%3Amm 或 name=hh%3Amm%3Ass 的形式，如果包含秒数（请参阅使用 step 属性）。
其他属性
除了所有<input>元素共有的属性之外，time 输入还提供以下属性。
注意：与许多数据类型不同，时间值具有周期性域，这意味着值达到最大可能值后，会回绕到开头。例如，指定 min 为 14:00 且 max 为 2:00 表示允许的时间值从下午 2:00 开始，运行到午夜到第二天，在凌晨 2:00 结束。请参阅本文的使 min 和 max 跨越午夜部分了解更多信息。
list
list 属性的值是位于同一文档中的<datalist>元素的id。<datalist> 提供了一个预定义值的列表，以建议用户在此输入中使用。列表中与type不兼容的任何值都不会包含在建议的选项中。提供的这些值是建议，而不是要求：用户可以选择此预定义列表中的值，也可以提供其他值。
max
一个字符串，指示要接受的最新时间，以与上面描述的相同的时间值格式指定。如果指定的字符串不是有效时间，则不设置最大值。
min
一个字符串，指定要接受的最早时间，以之前描述的时间值格式给出。如果指定的值不是有效时间字符串，则不设置最小值。
readonly
一个布尔属性，如果存在，则表示此字段不能由用户编辑。但是，其value 仍然可以通过 JavaScript 代码直接设置HTMLInputElement value 属性来更改。
注意：因为只读字段不能有值，所以required 对也指定了readonly 属性的输入没有任何影响。
step
step 属性是一个数字，指定值必须遵循的粒度，或者特殊值 any，如下所述。只有等于步进基础的值（如果已指定则为min，否则为value，以及如果两者都不存在则为适当的默认值）才是有效的。
any 的字符串值表示不暗示任何步进，并且允许任何值（除了其他约束，例如min 和max）。
注意：当用户输入的数据不符合步进配置时，用户代理可能会舍入到最接近的有效值，在有两个同样接近的选项时，倾向于正方向的数字。
对于time输入类型，step的值以秒为单位，并乘以1000的缩放因子（因为底层数值以毫秒为单位）。step的默认值为60，表示60秒（或1分钟，或60,000毫秒）。
当将any设置为step的值时，将使用默认的60秒，并且在UI中不会显示秒数。
使用时间输入
时间的基本用法
<input type="time">最简单的用法涉及一个基本的<input>和<label>元素组合，如下所示
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" />
</form>
控制输入大小
使用step属性
您可以使用step属性来改变每次增加或减少时间时跳跃的时间量（例如，在点击小箭头部件时，时间每次移动10分钟）。
它接受一个整数，定义您想要增加的秒数；默认值为60秒。以60秒为默认值，大多数用户代理时间UI显示小时和分钟，但不显示秒数。如果min或max值尚未导致秒数可见，则包含具有任何数值（不包含60的倍数）的step属性会将秒数添加到UI中。
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" step="2" />
</form>
要将分钟或小时指定为步长，请以秒为单位指定分钟或小时数，例如120表示2分钟，或7200表示2小时。
验证
默认情况下，<input type="time">不会对输入的值应用任何验证，除了用户代理的界面通常不允许您输入除时间值以外的任何内容之外。这很有帮助，但您不能完全依赖该值是一个正确的时间字符串，因为它可能是一个空字符串（""），这是允许的。
设置最大和最小时间
您可以使用min和max属性来限制用户可以选择的时间范围。在下面的示例中，我们设置了最小时间为12:00，最大时间为18:00。
<form>
<label for="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
<span class="validity"></span>
</form>
以下是上述示例中使用的CSS。在这里，我们利用:valid和:invalidCSS属性根据当前值是否有效来设置输入的样式。我们在输入框旁边的<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属性，有效时间范围将环绕午夜以生成一个有效的时间范围。此功能不受任何其他输入类型支持。
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="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-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="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span
CSS
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;
}
结果
技术摘要
规范
| 规范 |
|---|
| HTML标准 # time-state-(type=time) |
浏览器兼容性
BCD表格仅在浏览器中加载