如果你用的是Bootstrap-Material-datepicker，其实获取并计算事件时长非常直接，核心是利用它返回的原生Date对象来做时间差运算。我来一步步给你讲：

1. 先做好日期选择器的基础设置 #

假设你已经在页面上放了两个日期选择器，分别对应事件的开始和结束时间，比如：

<input type="text" id="startTime" class="datepicker" placeholder="开始时间">
<input type="text" id="endTime" class="datepicker" placeholder="结束时间">
<p>事件总时长：<span id="durationResult"></span> 分钟</p>

初始化的时候如果需要精确到小时分钟，记得开启时间选择：

$('.datepicker').bootstrapMaterialDatePicker({
  format: 'YYYY-MM-DD HH:mm', // 按需调整时间格式
  time: true,
  clearButton: true
});

2. 获取选中时间并计算时长 #

Bootstrap-Material-datepicker提供了data('date')方法，能直接返回选中时间的原生Date对象——这是计算时长的关键，因为原生Date对象可以直接相减得到毫秒差。

方式一：手动触发计算（比如点击按钮） #

$('#calculateBtn').click(function() {
  // 获取开始和结束时间的Date对象
  const startDate = $('#startTime').data('date');
  const endDate = $('#endTime').data('date');

  // 先校验是否都选了时间
  if (!startDate || !endDate) {
    alert('请先选择完整的开始和结束时间哦');
    return;
  }

  // 处理结束时间早于开始时间的情况
  if (endDate < startDate) {
    alert('结束时间不能早于开始时间哦');
    return;
  }

  // 计算毫秒差，转换为分钟（1分钟=60*1000=60000毫秒）
  const durationMs = endDate - startDate;
  const totalMinutes = Math.floor(durationMs / 60000); // 向下取整，也可以用Math.round四舍五入

  // 显示结果
  $('#durationResult').text(totalMinutes);
});

方式二：实时计算（日期变化时自动更新） #

如果想要用户选完时间就自动显示时长，可以监听日期选择器的change事件：

$('.datepicker').on('change', function() {
  const startDate = $('#startTime').data('date');
  const endDate = $('#endTime').data('date');

  if (startDate && endDate) {
    if (endDate < startDate) {
      $('#durationResult').text('结束时间不能早于开始时间');
      return;
    }
    const totalMinutes = Math.round((endDate - startDate) / 60000);
    $('#durationResult').text(totalMinutes);
  } else {
    $('#durationResult').text('请选择完整时间');
  }
});

额外提示 #

• 如果你只需要计算日期差（不需要精确到时间），计算逻辑完全一样，Date对象会自动处理当天的0点时间差。
• 如果需要更复杂的时长格式（比如x小时x分钟），可以基于总分钟数进一步拆分：

const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
console.log(`时长：${hours}小时${minutes}分钟`);

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