Bootstrap 5 不提供原生时间选择器，因 type="time" 在 iOS 等平台不触发面板、样式不统一、缺失步进/禁用等业务功能；推荐 Tempus Dominus（官方维护）或 flatpickr 实现兼容 Bootstrap 主题的时间选择。
Bootstrap 本身不提供原生的时间选择器（time input 在部分浏览器中支持但样式和交互不统一），直接用 <input type="time"> 会丢失 Bootstrap 的表单风格，且在 iOS 和旧版 Android 上几乎不可用。
为什么不能只靠 Bootstrap 自带组件
Bootstrap 5（及 4）的表单控件里没有 timepicker 或 datetimepicker 组件——它只封装了基础 <input type="text">、<input type="date"> 等，而 type="time" 的原生实现：
- 在 Safari 和大部分 iOS 设备上不触发时间选择面板，仅显示文本框
- Android 原生时间 picker 样式与 Bootstrap 不一致，无法继承
form-control类的边框、圆角、尺寸等 - 不支持键盘输入格式校验、分钟步进（如每 15 分钟一档）、禁用时间段等常见业务需求
推荐方案：用 Tempus Dominus + Bootstrap 5
Tempus Dominus 是官方推荐的 Bootstrap 5 兼容时间/日期选择器（由同一团队维护），替代已停止更新的 Bootstrap DatePicker。它支持纯时间模式，且能无缝融入 Bootstrap 主题。
实操步骤：
- 通过 CDN 引入：
<link href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.12/dist/css/tempus-dominus.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.12/dist/js/tempus-dominus.min.js"></script>
- HTML 中使用标准 Bootstrap 表单结构：
<div class="input-group"> <input type="text" class="form-control" id="timePicker"> <span class="input-group-text"><i class="bi bi-clock"></i></span> </div>
- 初始化为时间模式（非日期）：
const timePicker = new tempusDominus.TempusDominus(document.getElementById('timePicker'), { display: { components: { calendar: false, clock: true }, // 关闭日历，只留时钟 buttons: { today: false, clear: false, close: true } }, localization: { locale: 'zh-CN' }, restrictions: { minTime: '08:00', // 例如只允许选上午 8 点后 maxTime: '18:00' } });
常见坑：样式冲突与初始化时机
Tempus Dominus 默认使用自己的 CSS 类，若页面已加载过 Bootstrap 的 form-control 样式，可能造成输入框高度不一致或图标错位。
关键处理点：
- 确保
<input>元素有class="form-control"，Tempus Dominus 会自动适配其高度和 padding - 不要给 input 设置
type="time"—— 它依赖type="text"来接管渲染，否则插件不生效 - 初始化必须在 DOM 加载完成后执行，否则
document.getElementById()返回 null；用DOMContentLoaded或把 script 放在 body 底部 - iOS 上若点击无反应，检查是否启用了
touch-action: manipulation干扰了事件捕获（可临时移除测试）
替代轻量方案：flatpickr（适合不想引入大库时）
如果项目已用其他 UI 框架，或只需要最小依赖，flatpickr 更轻（~25KB gzip），且支持时间模式和 Bootstrap 主题。
配置要点：
- 启用时间模式：
flatpickr("#timeInput", { enableTime: true, noCalendar: true, dateFormat: "H:i", time_24hr: true, minuteIncrement: 5 // 每 5 分钟一档 }); - 要兼容 Bootstrap 样式，需手动加 class：
<input id="timeInput" class="form-control" placeholder="请选择时间">
，并禁用 flatpickr 自带边框：flatpickr("#timeInput", { ... })._flatpickr.input.classList.remove("flatpickr-input"); - 注意：flatpickr 的中文 locale 需单独引入
flatpickr/dist/l10n/zh.js，否则时间按钮仍显示英文
真正难的不是接入哪个库，而是决定要不要支持「秒级选择」「时区转换」「多语言 AM/PM」这些延伸需求——它们会立刻让简单的时间选择变成需要后端配合的完整时间字段管理。
