使用 step="60" 可使现代浏览器原生 time 输入框仅显示小时和分钟，chrome/edge 自动隐藏秒字段，safari 需配合 js 归一化；min/max 必须用补零的 "hh:mm" 格式，且受本地时区影响。
input type="time" 在现代浏览器中能直接唤起原生时间选择器，但默认行为常不满足业务需求——比如必须限制分钟粒度、禁用秒输入、或强制 12/24 小时制。关键不在“加功能”，而在“删干扰”和“控精度”。
如何让 input type="time" 只显示小时和分钟
原生 type="time" 在 Chrome / Edge / Safari（最新版）中默认显示时:分:秒，但秒字段不可编辑，视觉上冗余。真正有效的方式是：不依赖 CSS 隐藏，而是用 step 属性显式约束精度。
-
step="60"表示以 60 秒（即 1 分钟）为最小单位，此时 Chrome 和 Edge 会自动隐藏秒字段，只显示 HH:MM -
step="3600"则进一步限制为整点（如 09:00、14:00），适合预约时段固定为小时级的场景 - Safari 目前对
step的支持较弱，即使设为60仍可能显示秒，需配合 JS 拦截input事件做格式归一化
min/max 在时间控件中为何经常失效
常见错误是写成 min="9:00" 或 min="09:00:00" —— 这些值会被浏览器忽略，因为 min/max 要求严格使用 HH:MM 或 HH:MM:SS 格式，且必须补零。更隐蔽的问题是时区：所有值按本地时区解析，没有 UTC 偏移概念。
- 正确写法只有两种：
min="09:00"（24 小时制，两位小时+两位分钟）或min="09:00:00" - 若后端期望 ISO 时间字符串（如
"09:00"），前端无需转换；但若需拼接日期生成完整 ISO 时间，注意input.value永远不带日期部分，强行拼"2026-09-06T" + input.value可能因时区错位产生偏差 - 移动端 iOS Safari 对
min/max支持不稳定，建议用 JS 在change后校验并重置非法值
为什么不要用 pattern 校验 type="time"
pattern 属性在 type="time" 上基本无效。浏览器已内置格式校验逻辑，pattern 不会触发，且会与原生验证冲突，导致提交时行为不可预测。
- 校验应交由
validity.valid或checkValidity()判断，而非正则匹配 - 若需额外业务规则（如“不能早于当前时间”），应在
change或blur时用 JS 计算：new Date().toTimeString().slice(0,5)获取当前 HH:MM，再字符串比较 - 注意：字符串比较
"09:00" 是安全的，因 HH:MM 是字典序兼容的固定长度格式
真正难的不是配置属性，而是接受原生控件的边界：它不提供 12 小时制切换、不支持 AM/PM 显示、无法禁用键盘输入。一旦需求越过这些线，就该果断退回到自定义组件——别在 step 和 oninput 里打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
