<input type="time">原生支持时间选择，返回HH:MM或HH:MM:SS格式字符串，需注意24小时制、补零、step控制精度、旧版Safari兼容性、正则验证及本地时区无UTC信息。
使用 <input type="time"> 最直接
浏览器原生支持，不用 JS 就能拿到格式化的时间值（HH:MM 或 HH:MM:SS），且在移动端会唤起系统时间选择器。
基础写法就是：
<input type="time" id="meeting-time">
注意几点：
-
value必须是 24 小时制、两位数补零格式，比如"09:30"合法，"9:30"或"09:30 AM"会被忽略 - 不支持设置秒级精度的默认值（除非显式加
step="1"，见下条） - 部分旧版 Safari（iOS 15.4 之前）不支持
type="time"，会降级为文本框，需额外检测或用 polyfill
step 属性控制时间粒度
默认情况下，<input type="time"> 只允许选到分钟级（step=60）。如果需要秒级选择，必须显式设 step="1"：
立即学习“前端免费学习笔记（深入）”；
<input type="time" step="1" value="14:25:30">
常见误区：
-
step="30"表示每 30 秒一个可选项（如14:25:00、14:25:30），不是“半分钟”这种模糊概念 -
step值必须是整数秒，step="0.5"无效，会被浏览器忽略 - 设了
step="1"后，value必须带秒（如"14:25:30"），否则初始值可能为空
获取和验证用户输入的时间值
JS 中通过 .value 拿到的是字符串，格式固定为 "HH:MM" 或 "HH:MM:SS"（取决于是否设了 step="1"）：
const timeInput = document.getElementById('meeting-time');<br>console.log(timeInput.value); // "09:45" 或 "13:20:15"
验证建议直接用正则，别依赖 Date.parse() —— 它对 "25:00" 这类非法值也返回有效时间戳：
- 分钟级校验：
/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/ - 秒级校验：
/^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/ - 空值判断不能只看
value === ""，某些浏览器在未选择时返回空字符串，但用户删掉内容后也可能留空格，建议用!value.trim()
兼容性差时的 fallback 方案
当目标环境明确不支持（如老版 iOS Safari），硬上 type="time" 会导致体验断裂。稳妥做法是先检测再降级：
const input = document.createElement('input');<br>input.type = 'time';<br>if (input.type !== 'time') {<br> // 插入两个 select：小时 + 分钟，或用第三方库如 flatpickr<br> // 注意：不要 fallback 成 text + 正则提示，用户无法直观选择</br>}
真正容易被忽略的点是时区 —— <input type="time"> 的值始终是本地时区的显示值，不带时区信息。如果后端需要 UTC 时间，必须由 JS 显式转换，不能假设输入值等于服务器期望的时间戳。
