Bootstrap Timepicker：轻量级时间选择组件开发者指南

2026-04-27 13:07:51作者：余洋婵Anita

Bootstrap Timepicker是一款专为Bootstrap框架设计的轻量级时间选择组件，提供直观的时间选择界面和灵活的配置选项。作为Bootstrap时间选择器的典型实现，它支持鼠标和键盘操作，可无缝集成到各类Web应用中，帮助开发者快速构建专业的时间输入功能。

快速上手

环境准备

使用Bootstrap Timepicker前需确保项目已加载以下依赖：

Bootstrap CSS（v2.0+）
jQuery（1.7+）
Bootstrap JavaScript（用于模态框等高级功能）

安装方式

包管理器安装

通过npm或Bower获取最新版本：

npm install bootstrap-timepicker
# 或
bower install bootstrap-timepicker

源码部署

克隆仓库：git clone https://gitcode.com/gh_mirrors/bo/bootstrap-timepicker
从dist目录提取bootstrap-timepicker.min.css和bootstrap-timepicker.min.js

基础实现

📌 核心步骤：

引入样式文件到<head>：

<link rel="stylesheet" href="css/bootstrap-timepicker.min.css">

在</body>前引入脚本：

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-timepicker.min.js"></script>

创建输入框并初始化：

<div class="input-group bootstrap-timepicker timepicker">
  <input id="basicTimepicker" type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>

<script>
  $('#basicTimepicker').timepicker();
</script>

高级配置

配置选项

通过初始化参数自定义组件行为：

参数名	类型	默认值	说明
`minuteStep`	数字	15	分钟选择步长
`showSeconds`	布尔值	false	是否显示秒数选择
`showMeridian`	布尔值	true	12小时制（AM/PM）切换
`defaultTime`	字符串/布尔值	'current'	默认时间（'current'/'13:45'或false）
`template`	字符串/布尔值	'dropdown'	界面样式（'dropdown'/'modal'或false）
`snapToStep`	布尔值	false	输入时间自动对齐到步长值

实用配置示例

24小时制带秒数选择

$('#militaryTimepicker').timepicker({
  showMeridian: false,
  showSeconds: true,
  minuteStep: 5,
  defaultTime: '14:30:00'
});

模态框式时间选择器

$('#modalTimepicker').timepicker({
  template: 'modal',
  modalBackdrop: true,
  appendWidgetTo: 'body'
});

API参考

核心方法

方法	参数	说明
`showWidget()`	-	显示时间选择面板
`hideWidget()`	-	隐藏时间选择面板
`getTime()`	-	获取当前选中时间字符串
`setTime(time)`	time:字符串	设置时间（如'9:30 AM'）
`clear()`	-	清空输入框

事件处理

监听组件事件实现交互逻辑：

$('#eventTimepicker').timepicker().on({
  'show.timepicker': function(e) {
    console.log('面板显示，当前时间：' + e.time.value);
  },
  'changeTime.timepicker': function(e) {
    console.log('时间变更为：' + e.time.hours + ':' + e.time.minutes);
  }
});

实用技巧

技巧1：输入验证与格式化

结合jQuery Validate实现时间格式验证：

$('#appointmentTime').timepicker().on('changeTime.timepicker', function(e) {
  var time = e.time.value;
  if (!/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
    $(this).addClass('invalid');
  }
});

技巧2：与日期选择器联动

配合Bootstrap Datepicker实现完整日期时间选择：

// 日期选择后自动聚焦到时间选择器
$('#datepicker').datepicker().on('changeDate', function() {
  $('#timepicker').focus();
});

技巧3：键盘导航优化

自定义键盘操作提升可访问性：

$('#keyboardTimepicker').timepicker().on('keydown.timepicker', function(e) {
  if (e.key === 'Escape') {
    $(this).timepicker('hideWidget');
  }
});

常见问题

Q: 如何调整时间选择面板的位置？

A: 使用orientation参数自定义定位：

$('#positionedTimepicker').timepicker({
  orientation: { x: 'right', y: 'bottom' }
});

Q: 如何禁用鼠标滚轮调整时间？

A: 设置disableMousewheel选项：

$('#staticTimepicker').timepicker({
  disableMousewheel: true
});

通过灵活运用这些配置选项和API，Bootstrap Timepicker可以满足从简单表单到复杂应用的各类时间选择需求，为用户提供流畅直观的操作体验。

bootstrap-timepicker

[Deprecated] A simple timepicker component for Twitter Bootstrap

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-timepicker

登录后查看全文

Bootstrap Timepicker：轻量级时间选择组件开发者指南

快速上手

环境准备

安装方式

包管理器安装

源码部署

基础实现

高级配置

配置选项

实用配置示例

24小时制带秒数选择

模态框式时间选择器

API参考

核心方法

事件处理

实用技巧

技巧1：输入验证与格式化

技巧2：与日期选择器联动

技巧3：键盘导航优化

常见问题

Q: 如何调整时间选择面板的位置？

Q: 如何禁用鼠标滚轮调整时间？

热门内容推荐

最新内容推荐

项目优选

Bootstrap Timepicker：轻量级时间选择组件开发者指南

快速上手

环境准备

安装方式

包管理器安装

源码部署

基础实现

高级配置

配置选项

实用配置示例

24小时制带秒数选择

模态框式时间选择器

API参考

核心方法

事件处理

实用技巧

技巧1：输入验证与格式化

技巧2：与日期选择器联动

技巧3：键盘导航优化

常见问题

Q: 如何调整时间选择面板的位置？

Q: 如何禁用鼠标滚轮调整时间？

相关内容推荐

热门内容推荐

最新内容推荐

项目优选