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

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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

atomcode

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

413

339

cherry-studio

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

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

快速上手

环境准备

安装方式

包管理器安装

源码部署

基础实现

高级配置

配置选项

实用配置示例

24小时制带秒数选择

模态框式时间选择器

API参考

核心方法

事件处理

实用技巧

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

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

技巧3：键盘导航优化

常见问题

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

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

热门内容推荐

最新内容推荐

项目优选

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

快速上手

环境准备

安装方式

包管理器安装

源码部署

基础实现

高级配置

配置选项

实用配置示例

24小时制带秒数选择

模态框式时间选择器

API参考

核心方法

事件处理

实用技巧

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

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

技巧3：键盘导航优化

常见问题

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

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

相关内容推荐

热门内容推荐

最新内容推荐

项目优选