Tempus Dominus Bootstrap 4 日期时间选择器完全指南

核心功能解析

Tempus Dominus Bootstrap 4 是一款基于 Bootstrap 4 框架的日期时间选择器组件，它将复杂的时间选择功能封装为直观的交互界面，帮助开发者轻松实现专业级的日期时间选择体验。该组件特别适合需要精确时间输入的场景，如预约系统、日程管理工具和数据筛选功能。

主要功能亮点

• 双日历并排选择：支持同时查看和选择日期与时间，通过分栏设计减少操作步骤
• 周数显示模式：可切换显示周数编号，满足项目管理和时间跟踪需求
• 灵活的工具栏配置：提供多样化的操作按钮，支持快速导航和时间调整
• 响应式设计：自动适配不同屏幕尺寸，在移动设备上依然保持良好体验

图1：双日历并排选择模式，左侧选择日期，右侧调整时间

图2：带周数编号的日历视图，便于周级时间管理

快速上手流程

环境准备

目标：在项目中集成 Tempus Dominus 组件
方法：通过 Git 克隆项目仓库
预期结果：获得完整的组件源代码和示例文件

git clone https://gitcode.com/gh_mirrors/bo/bootstrap-4

目录结构解析

下载完成后，你将看到以下核心目录结构：

📦 根目录 ┣ 📂 docs/ - 文档和示例文件 ┃ ┣ 📂 img/ - 示例图片资源 ┃ ┣ 📂 css/ - 样式表文件 ┃ ┗ 📂 js/ - JavaScript 文件 ┣ 📂 src/ - 源代码目录 ┃ ┣ 📂 js/ - JavaScript 源文件 ┃ ┗ 📂 sass/ - Sass 样式源文件 ┗ 📜 package.json - 项目配置文件

基础使用步骤

目标：在网页中添加日期时间选择器
方法：三步集成法
预期结果：页面上显示可交互的日期时间选择器

1. 引入依赖文件 在 HTML 页面头部添加 CSS 样式：

   <link rel="stylesheet" href="docs/css/tempusdominus-bootstrap-4.css">
   

   在页面底部添加 JavaScript 文件：

   <script src="docs/js/tempusdominus-bootstrap-4.js"></script>
   

2. 创建 HTML 元素 在需要显示选择器的位置添加容器：

   <div class="input-group date" id="datetimepicker">
     <input type="text" class="form-control">
     <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">
         <i class="far fa-calendar-alt"></i>
       </button>
     </div>
   </div>
   

3. 初始化组件 添加 JavaScript 初始化代码：

   $(function () {
     $('#datetimepicker').datetimepicker();
   });
   

深度定制指南

样式定制

目标：调整日历组件的外观以匹配项目主题
方法：修改 Sass 变量后重新编译
预期结果：自定义颜色和尺寸的日历组件

Sass 源文件位置：src/sass/_tempusdominus-bootstrap-4.scss

常用可定制变量：

• $calendar-bg-color: 日历背景色
• $calendar-text-color: 日历文本色
• $primary-color: 选中日期高亮色
• $border-radius: 边框圆角大小

修改后通过 npm 命令编译：

npm run build

💡 提示：建议先复制变量文件进行修改，避免直接修改源文件导致更新困难

功能配置

目标：根据需求调整选择器功能
方法：通过初始化选项进行配置
预期结果：具有特定行为的定制化选择器

常用配置示例：

1. 日期范围选择

$('#datetimepicker').datetimepicker({
  minDate: moment().startOf('day'),
  maxDate: moment().endOf('month')
});

应用场景：酒店预订系统的入住日期选择

2. 仅时间选择模式

$('#datetimepicker').datetimepicker({
  format: 'LT'
});

应用场景：会议时间安排

3. 周选择模式

$('#datetimepicker').datetimepicker({
  viewMode: 'weeks'
});

应用场景：项目周期规划

常见配置问题

问题1：选择器不显示

可能原因：Bootstrap CSS 未正确引入
解决方案：确保页面中先加载 Bootstrap CSS，再加载 Tempus Dominus CSS

问题2：日期选择后输入框无反应

可能原因：jQuery 版本冲突
解决方案：使用官方推荐的 jQuery 3.3+ 版本，并确保在组件 JS 前加载

问题3：样式错乱

可能原因：Bootstrap 版本不兼容
解决方案：Tempus Dominus Bootstrap 4 仅支持 Bootstrap 4.x 版本，不兼容 Bootstrap 3 或 5

扩展知识

项目构建流程

Tempus Dominus 使用 Grunt 作为构建工具，核心构建命令：

• npm run build: 编译 Sass 和 JavaScript 文件
• npm run watch: 监听文件变化并自动重新编译
• npm run docs: 生成文档网站

浏览器兼容性

该组件支持所有现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。对于 IE11 及以下版本，可能需要添加额外的 polyfill。

高级应用场景

• 日期时间范围选择：结合两个选择器实现开始时间和结束时间的关联选择
• 时间戳转换：通过 API 将选择的日期时间转换为 Unix 时间戳
• 本地化配置：支持多语言显示，可配置星期起始日等区域设置

通过以上指南，你可以快速掌握 Tempus Dominus Bootstrap 4 日期时间选择器的使用和定制方法。无论是简单的日期选择还是复杂的时间范围控制，该组件都能提供专业且易用的解决方案。