怎么用Bootstrap制作时间选择器-Bootstrap教程-PHP中文网

Bootstrap 5 不提供原生时间选择器，因 type="time" 在 iOS 等平台不触发面板、样式不统一、缺失步进/禁用等业务功能；推荐 Tempus Dominus（官方维护）或 flatpickr 实现兼容 Bootstrap 主题的时间选择。

怎么用bootstrap制作时间选择器

Bootstrap 本身不提供原生的时间选择器（time input 在部分浏览器中支持但样式和交互不统一），直接用会丢失 Bootstrap 的表单风格，且在 iOS 和旧版 Android 上几乎不可用。

为什么不能只靠 Bootstrap 自带组件

Bootstrap 5（及 4）的表单控件里没有 timepicker 或 datetimepicker 组件——它只封装了基础、等，而 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 样式，可能造成输入框高度不一致或图标错位。

关键处理点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

确保元素有 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」这些延伸需求——它们会立刻让简单的时间选择变成需要后端配合的完整时间字段管理。