Tempus Dominus Bootstrap 4 日期时间选择器开发指南

2026-03-10 05:29:25作者：曹令琨Iris

核心功能概览：打造高效日期时间交互体验

作为开发者，我们经常需要在项目中集成直观易用的日期时间选择组件。Tempus Dominus Bootstrap 4 作为一款基于 Bootstrap 4 的日期时间选择器，提供了丰富的交互功能和灵活的定制选项。该项目的核心价值在于：

原生 Bootstrap 4 兼容：无缝集成 Bootstrap 4 样式体系，保持界面风格一致性
多模式时间选择：支持日期选择、时间选择、范围选择等多种模式
高度可定制化：通过配置选项和主题系统满足不同项目需求
响应式设计：完美适配从移动设备到桌面端的各种屏幕尺寸

💡 核心原理：组件采用模块化设计，将日期处理、界面渲染和用户交互分离，通过 jQuery 事件系统实现与页面的双向通信，同时利用 Bootstrap 的弹出层组件构建浮动选择面板。

环境搭建指南：3步完成开发环境配置

1. 获取项目源码

首先克隆项目仓库到本地开发环境：

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

2. 安装依赖包

项目使用 npm 管理依赖，执行以下命令安装必要的开发工具：

npm install

3. 启动开发服务器

我们使用 browser-sync 作为开发服务器，它能实时监测文件变化并自动刷新浏览器：

npx browser-sync start --server docs --files "docs/**/*.html, docs/css/*.css, docs/js/*.js"

⚠️ 注意：确保 Node.js 版本不低于 14.x，否则可能出现依赖安装或构建错误。

个性化配置实践：从基础到高级的定制方案

配置体系详解

Tempus Dominus 提供了多层次的配置方式，满足不同场景的需求：

HTML 数据属性配置：适合简单场景的快速配置

<input type="text" data-toggle="datetimepicker" 
       data-target="#datetimepicker1"
       data-date-format="YYYY-MM-DD">

JavaScript 初始化配置：提供更灵活的选项控制

$('#datetimepicker1').datetimepicker({
  format: 'YYYY-MM-DD',
  icons: {
    time: 'far fa-clock',
    date: 'far fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down'
  }
});

Sass 变量定制：通过修改源码中的 Sass 变量实现深度样式定制

// 在 _tempusdominus-bootstrap-4.scss 中修改
$datetimepicker-padding: 0.5rem;
$datetimepicker-background: #ffffff;
$datetimepicker-border-color: #ced4da;

💡 实战Tips：对于需要在多个页面保持一致配置的项目，可以创建一个单独的配置文件 datetimepicker-config.js，集中管理所有选项，提高代码复用性。

扩展开发指南：构建自定义功能

1. 事件监听与自定义行为

利用组件提供的事件系统，可以实现复杂的交互逻辑：

$('#datetimepicker1').on('change.datetimepicker', function(e) {
  // 当日期选择变化时触发
  console.log('选中的日期:', e.date.format('YYYY-MM-DD'));
  
  // 自定义业务逻辑示例：检查所选日期是否为工作日
  if (e.date.day() === 0 || e.date.day() === 6) {
    alert('请选择工作日');
    $(this).datetimepicker('clear');
  }
});

2. 本地化配置

通过引入对应语言的本地化文件，实现界面多语言支持：

<script src="js/tempusdominus-bootstrap-4.js"></script>
<script src="js/locales/fr.js"></script>
<script>
  $('#datetimepicker1').datetimepicker({
    locale: 'fr'
  });
</script>

3. 自定义工具按钮

通过扩展工具栏配置，可以添加自定义操作按钮：

$('#datetimepicker1').datetimepicker({
  toolbarPlacement: 'bottom',
  buttons: {
    showToday: true,
    showClear: true,
    showClose: true,
    customButtons: [{
      text: '选择昨天',
      action: function() {
        var yesterday = moment().subtract(1, 'day');
        this.date(yesterday);
      }
    }]
  }
});