原生 兼容现代浏览器但存在ie不支持、安卓旧版降级、无时区和步进控制等问题；推荐用flatpickr实现轻量可定制方案，需注重可访问性、真机测试与表单联动。
HTML 原生 <input type="time"> 能直接用，但兼容性和交互体验有限
现代浏览器（Chrome、Edge、Firefox 57+、Safari 14.1+）都支持 <input type="time">，它会触发系统级时间选择器（iOS 上是滚轮，Android 是数字键盘或时钟界面）。但问题很实际：value 始终是 "HH:MM" 格式（24 小时制，无秒），不带时区；IE 完全不支持；安卓 Chrome 旧版本可能只弹出文本框而非原生控件。
实操建议：
- 若项目只需基础功能、目标用户集中在新 Chrome/Edge/Safari，直接用
<input type="time" id="meeting-time">即可，无需 JS - 必须支持 IE 或需统一 UI 时，不能依赖原生，得换方案
- 注意：原生控件无法限制步进（比如只允许 15 分钟间隔），
step属性在部分浏览器（如 Safari）无效
用 flatpickr 实现轻量、可定制的纯 JS 时间选择器
flatpickr 是目前最稳妥的轻量替代方案（~20KB gzip），不依赖 jQuery，支持时间、日期、日期时间混合模式，且对移动端友好。
实操建议：
- 引入方式：
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>，再加 CSS - 基础初始化：
flatpickr("#time-input", { enableTime: true, noCalendar: true, dateFormat: "H:i", time_24hr: true, minuteIncrement: 15 }); -
minuteIncrement: 15可强制只显示 :00、:15、:30、:45 —— 这是原生input[type=time]做不到的 - 注意：
dateFormat: "H:i"输出 24 小时格式（如"14:30"），若需 AM/PM，改用"h:i K"并设time_24hr: false
用 vanilla-picker 或自建方案时，别忽略 input 的可访问性与表单联动
很多手写时间选择器只顾点击弹窗，却忘了 <input> 本身要能键盘输入、支持 tabindex、响应 change 和 input 事件，否则屏幕阅读器用户或键盘党会卡住。
实操建议：
- 始终保留一个真实的
<input type="text" readonly>作为焦点目标和表单值载体，不要用div模拟输入框 - 绑定
keydown事件处理方向键微调（如 ↑/↓ 增减小时，→/← 增减分钟），比纯鼠标更可靠 - 提交表单前校验值是否符合格式（例如用正则
/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/），因为用户可能手动输入或粘贴非法内容 - 避免在
blur时自动修正值（比如把"25:00"改成"01:00"），这会让用户困惑；应提示错误并保持焦点
移动端真机测试比桌面预览重要得多
桌面 Chrome 的模拟设备模式会骗人：它可能渲染出漂亮的时钟面板，但真机上（尤其 Android WebView 或微信内嵌页）大概率 fallback 到文本输入。iOS 微信则常禁用所有原生 input[type=time]，强制走软键盘。
实操建议：
- 必测机型：微信内置浏览器（Android/iOS）、支付宝、企业微信、华为/小米自带浏览器
- 若检测到 WebView 环境（可通过
navigator.userAgent判断"MicroMessenger"或"AlipayClient"），直接降级为flatpickr或带滚轮的自定义组件 - 别假设用户会点“确认”按钮——很多安卓键盘没有确认键，靠失焦触发，所以
change事件监听比click更关键
"HH:MM" 值，并且这个值能被后端无歧义解析。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
