Tempus Dominus Bootstrap 4 Datetime Picker完全指南

2026-03-10 05:30:28作者：贡沫苏Truman

核心资源速览

让我们首先了解项目的核心目录结构，这将帮助你快速定位所需资源：

主要目录解析

docs/: 项目文档中心，包含使用指南和示例
- 主要用途：存放项目文档、示例和静态资源
- 使用场景：查阅API文档、查看交互示例、获取安装说明
src/: 源代码目录，包含项目核心实现
- js/: JavaScript源文件
  - 主要用途：实现日期时间选择器的核心逻辑
  - 使用场景：修改功能逻辑、扩展组件功能
- sass/: 样式源文件
  - 主要用途：定义组件样式和主题变量
  - 使用场景：自定义组件外观、调整样式细节
tasks/: 构建任务脚本
- 主要用途：自动化构建、版本管理等辅助功能
- 使用场景：项目打包、版本更新

关键文件说明

package.json: 项目配置文件，包含依赖信息和脚本命令
Gruntfile.js: 构建工具配置，定义项目构建流程
src/js/tempusdominus-bootstrap-4.js: 日期时间选择器核心实现
src/sass/_tempusdominus-bootstrap-4.scss: 组件样式定义

环境搭建指南

要开始使用Tempus Dominus Bootstrap 4日期时间选择器，让我们先搭建开发环境：

1. 获取项目代码

首先克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/bo/bootstrap-4  # 克隆项目代码库
cd bootstrap-4  # 进入项目目录

2. 安装依赖

项目使用npm管理依赖，执行以下命令安装所需依赖：

npm install  # 安装项目依赖包

💡 技术小贴士：确保你的Node.js版本在10.0.0以上，以避免依赖安装问题。

3. 启动开发服务器

项目提供了便捷的开发预览方式，使用以下命令启动本地服务器：

npx grunt serve  # 启动开发服务器并监听文件变化

⚠️ 注意事项：如果提示"grunt: command not found"，请先全局安装grunt-cli：npm install -g grunt-cli

服务器启动后，你可以在浏览器中访问http://localhost:9000查看项目文档和示例。

组件使用详解

日期时间选择器的使用非常简单，只需几个步骤即可集成到你的项目中：

基本集成步骤

引入样式文件 在HTML页面的<head>部分添加样式引用：

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

引入脚本文件 在HTML页面的</body>之前添加必要的脚本引用：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="dist/js/tempusdominus-bootstrap-4.js"></script>

创建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="fa fa-calendar"></i>
    </button>
  </div>
</div>

初始化组件 添加JavaScript代码初始化日期时间选择器：
```
$(function () {
  $('#datetimepicker').datetimepicker();
});
```

组件界面预览

下面是日期时间选择器的界面示例，展示了日历视图与时间选择器的组合效果：

定制化配置手册

Tempus Dominus提供了丰富的配置选项，让你可以根据需求定制组件行为。

核心配置选项

日期格式设置

$('#datetimepicker').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'  // 设置日期时间显示格式
});

最小/最大日期限制

$('#datetimepicker').datetimepicker({
  minDate: moment().subtract(1, 'days'),  // 最小日期为昨天
  maxDate: moment().add(7, 'days')        // 最大日期为7天后
});

本地化设置

$('#datetimepicker').datetimepicker({
  locale: 'zh-cn'  // 设置为中文显示
});

💡 技术小贴士：完整的配置选项可以在docs/Options.md文件中查看，包含30+可配置参数。

样式定制

如果你需要修改组件样式，可以编辑Sass源文件：

修改src/sass/_tempusdominus-bootstrap-4.scss中的变量
重新编译样式：npx grunt sass
编译后的CSS文件会生成在dist/css/目录下

常见问题解决

Q: 组件无法正常显示怎么办？

A: 首先检查是否正确引入了jQuery和Bootstrap依赖，然后确认选择器是否正确指向了目标元素。

Q: 如何在Vue/React项目中使用？

A: 可以通过npm安装包：npm install tempusdominus-bootstrap-4，然后按照框架要求进行导入和初始化。

Q: 日期选择器弹出位置不正确？

A: 检查容器元素的CSS定位属性，确保没有设置overflow: hidden导致弹出框被截断。

高级功能探索

事件处理

你可以监听组件的各种事件来实现自定义逻辑：

$('#datetimepicker').on('change.datetimepicker', function(e) {
  console.log('选中的日期时间:', e.date.format());
});

方法调用

通过JavaScript方法控制日期选择器：

// 设置日期
$('#datetimepicker').datetimepicker('date', moment());

// 获取当前日期
var currentDate = $('#datetimepicker').datetimepicker('viewDate');

// 销毁组件
$('#datetimepicker').datetimepicker('destroy');

💡 技术小贴士：完整的事件列表和方法说明可以在docs/Functions.md文件中找到。

项目构建与部署

当你完成定制并准备部署时，可以执行以下步骤：

构建生产版本

npx grunt build  # 编译并压缩CSS和JS文件

部署文件 构建完成后，dist/目录下的文件就是可以直接部署到生产环境的资源：
- dist/css/tempusdominus-bootstrap-4.css (未压缩样式)
- dist/css/tempusdominus-bootstrap-4.min.css (压缩样式)
- dist/js/tempusdominus-bootstrap-4.js (未压缩脚本)
- dist/js/tempusdominus-bootstrap-4.min.js (压缩脚本)