如何使用Tempus Dominus计算时间差？Bootstrap4考勤系统开发

嘿，刚好我之前用Tempus Dominus Bootstrap 4做过类似的时间计算功能，给你一套能直接落地的解决方案：

核心思路 #

借助Tempus Dominus自带的change.datetimepicker事件监听结束时间的选择动作，利用它内置的Moment.js工具来处理时间差计算，最后把结果友好展示给用户。

具体实现步骤 #

1. 页面元素准备（假设你已有时间选择器，补充一个显示时长的区域）：

<div class="time-picker-group">
  <label>周日开始时间：</label>
  <input type="text" id="sun_start" class="form-control datetimepicker">
  
  <label>周日结束时间：</label>
  <input type="text" id="sun_end" class="form-control datetimepicker">
  
  <div class="mt-2">
    <strong>总工作时长：</strong>
    <span id="sun_duration" class="text-primary">--</span>
  </div>
</div>

2. 初始化选择器并添加事件监听：

// 初始化两个时间选择器（按需调整配置，比如只选时分）
$('#sun_start, #sun_end').datetimepicker({
  format: 'HH:mm', // 只显示小时和分钟，适配考勤场景
  useCurrent: false, // 禁止自动填充当前时间
  stepping: 15, // 可选：设置15分钟步长，符合常规考勤粒度
  icons: {
    time: 'far fa-clock',
    date: 'far fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down'
  }
});

// 监听结束时间的选择完成事件
$('#sun_end').on('change.datetimepicker', function(e) {
  // 获取开始时间和结束时间的Moment对象
  const startTime = $('#sun_start').datetimepicker('viewDate');
  const endTime = e.date;

  // 合法性校验：避免无效输入
  if (!startTime.isValid()) {
    $('#sun_duration').text('请先选择开始时间');
    return;
  }
  if (endTime.isBefore(startTime)) {
    $('#sun_duration').text('结束时间不能早于开始时间');
    return;
  }

  // 计算时间差：转成小时+分钟的友好格式
  const totalMinutes = endTime.diff(startTime, 'minutes');
  const hours = Math.floor(totalMinutes / 60);
  const minutes = totalMinutes % 60;

  // 渲染结果到页面
  $('#sun_duration').text(`${hours}小时${minutes}分钟`);

  // 如果需要小数形式的小时（比如2.5小时），替换成这段代码：
  // const decimalHours = endTime.diff(startTime, 'hours', true);
  // $('#sun_duration').text(`${decimalHours.toFixed(1)}小时`);
});

关键细节说明 #

• Tempus Dominus的viewDate方法返回Moment.js对象，直接用Moment的diff、isBefore等方法就能处理时间计算和校验，不用自己折腾字符串转时间的逻辑。
• 必须加合法性校验，避免用户漏选开始时间或选了逻辑错误的时间，提升系统稳定性和用户体验。
• 如果需要包含日期的计算，只需要把format改成YYYY-MM-DD HH:mm，计算逻辑完全不用调整。

内容的提问来源于stack exchange，提问作者Troy Marker