直接使用即可唤起原生时间选择器，但默认无初始值、不校验格式、跨浏览器行为不一致；仅接受严格 hh:mm（24小时制）字符串如 "14:30"，value 必须两位小时+两位分钟（如 "09:05"），不支持 "2:30 pm" 或 "14:30:00"；min/max/step 受限于浏览器实现，ios 对 step 支持差，需 js 补充校验。
HTML <input type="time"> 基本用法
直接写 <input type="time"> 就能唤起原生时间选择器，但默认不带初始值、不校验格式、也不保证跨浏览器行为一致。它只接受 HH:MM 格式（24 小时制），比如 "14:30"，不能带秒或时区。
常见错误是给 value 写成 "2:30 PM" 或 "14:30:00" —— 浏览器会直接忽略该值，输入框显示为空。
-
value必须是两位小时 + 两位分钟，如"09:05"，不足位补零 - 支持
min和max，但值也必须符合HH:MM格式，例如min="08:00" -
step控制可选分钟粒度，默认60（即每小时一个选项），设为30可选 :00/:30，1才支持任意分钟（但部分 iOS 版本仍限制为 5 分钟步长）
Chrome / Edge 和 Safari 的行为差异
桌面 Chrome/Edge 点击会弹出滚轮式时间选择器；Safari（macOS/iOS）则显示为下拉菜单或数字键盘（iOS 上常触发数字键盘而非时间面板），且不支持 min/max 的视觉禁用（仅提交时校验）。
更关键的是：iOS Safari 对 step="1" 基本无效，即使写了也只允许 5 分钟间隔；而 Android Chrome 多数支持 step="1"，但部分厂商定制系统可能降级处理。
- 若需精确到分钟且兼容 iOS，得靠 JS 补充校验或改用第三方控件
-
change事件在用户确认选择后才触发（比如点“完成”或失焦），不是每次滚动都触发 - 不要依赖
input事件监听实时输入——type="time"不允许手动键入，该事件在多数浏览器中不会触发
获取和设置值的正确方式
JS 操作必须通过 .value 读写字符串，不能用 Date 对象直接赋值。例如 input.value = new Date().toTimeString() 会失败，因为返回的是 "14:30:22 GMT+0800 (CST)"，不符合格式。
- 获取当前时间并填入：
const now = new Date(); input.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}` - 从
value解析为时间戳需自行处理：它不含日期，new Date("14:30")是非法的，得拼上当天日期再解析 - 表单提交时，该字段值就是字符串，后端需按
HH:MM解析，别当成 ISO 时间处理
为什么有时点击没反应或样式异常
最常被忽略的一点：某些 CSS 重置库（如 normalize.css 或旧版 Bootstrap）会把 input[type="time"] 的 appearance 设为 none，导致原生控件被隐藏，只剩一个空白框。
- 检查开发者工具中该元素是否被
-webkit-appearance: none覆盖，若有，加回-webkit-appearance: listbox（Chrome/Edge）或listbox（Safari） - 在未设置
value时，部分安卓浏览器显示灰色占位文字（如 “--:--”），但这不是placeholder属性，无法自定义 - 如果页面用了 Web Components 或 Shadow DOM，原生时间选择器可能无法穿透渲染，此时需降级为文本输入 + JS 校验
<input type="time"> 往往只是起点，后续总得靠 JS 拉一把。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
