原生 <input type="time"> 能用但限制多：兼容性差（Safari 旧版退化为文本框）、不支持分钟步进（如15分钟）、无清空按钮、无法隐藏秒；推荐 flatpickr（轻量、支持 minuteIncrement/清空/格式控制）或手写 select 方案。
原生 <input type="time"> 就能做时间选择器，但浏览器兼容性差、样式不可控、不支持分钟步进（如只允许 15 分钟一档）——真要落地用，得自己封装或选轻量库。
原生 input[type="time"] 能用吗？
能，但限制明显：
- Chrome / Edge 支持较好；Safari 仅从 iOS 16.4 / macOS Ventura 13.3 开始支持，旧版本直接退化为文本框
- 无法设置
step为非秒单位（比如step="900"表示 15 分钟，但 Safari 忽略它） - 没有“清空”按钮，用户只能手动删文字
- 移动端调起的是系统原生时间滚轮，无法定制格式（如不显示秒）
用 flatpickr 实现带步进和清空的时间选择器
比 pickadate 更轻（~12KB），API 简单，支持 minTime/maxTime、enableTime、noCalendar，且默认带清空按钮。
安装后初始化：
立即学习“前端免费学习笔记（深入）”；
flatpickr("#time-picker", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true,
minuteIncrement: 15,
allowInput: true,
clickOpens: true
});
-
minuteIncrement: 15是关键：强制只允许选择 :00、:15、:30、:45 -
allowInput: true允许用户手动输入，但输入后会自动对齐到最近的 15 分钟档位（如输 10:17 → 自动修正为 10:15） - 如果需要禁用秒，在
dateFormat中不要写s，同时确保后端接收时也按H:i解析
纯 JS 手写简易版（无依赖，适合嵌入式场景）
当项目不能引入第三方库，又只需要小时+15 分钟粒度时，可用 <select> 拼接：
<select id="hour"> <option value="09">09</option> <option value="10">10</option> </select>: <select id="minute"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select>
- 监听两个
select的change事件，拼成"09:15"写入隐藏<input type="hidden"> - 注意：iOS 上
select默认样式丑且难改，可用appearance: none+ 自定义箭头，但部分老 iOS 版本不生效 - 如果需支持键盘输入，就得换成
contenteditable或监听input事件做防抖校验，复杂度陡增
真正麻烦的不是“怎么选时间”，而是“怎么让时间值可靠地进表单、过校验、被后端正确解析”。分钟步进、时区隐含、空值处理、移动端 fallback —— 这些细节堆起来，比写个函数还容易漏。
