如何基于eonasdan/bootstrapdatetimepicker动态配置时间字段的时间限制

我来帮你搞定这个问题！核心思路是封装复用的初始化逻辑+维护全局的时间区间状态，这样不管新增多少字段，都能统一管理minDate/maxDate和禁用重叠区间的规则。下面是具体的实现方案和完整代码：

关键思路拆解 #

1. 封装时间选择器初始化函数 #

把重复的初始化代码抽成独立函数，不管是初始字段还是动态克隆的字段，都能一键初始化，避免冗余代码。函数里会绑定好自身from和until的min/max关联，同时处理编辑时的禁用规则。

2. 维护全局时间区间数组 #

我们需要一个数组来记录所有已确认的时间区间（每个区间包含start和end的moment对象）。每当某个字段的时间范围确定后，就更新这个数组；编辑时，排除当前正在编辑的字段的区间，把剩下的设为其他字段的disabledTimeIntervals。

3. 修复动态克隆逻辑 #

原来的克隆代码存在选择器语法错误（$("\.timeday0from")应该是$(".timeday0from")），而且克隆后没有初始化新的时间选择器。我们会优化克隆逻辑，同时在克隆完成后自动初始化新字段。

4. 实时更新禁用规则 #

每当任意一个时间字段的时间变化时，重新计算全局的禁用区间，然后对除当前编辑字段外的所有时间选择器应用这些规则，确保不会出现时间重叠。

完整实现代码 #

<!-- 依赖资源引入，顺序不能乱 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-lg-6 col-md-12">
  <div class="well">
    <h3>Day</h3>
    <div class="row" id="day_0">
      <div class="form-group col-sm-4 col-xs-6">
        <label for="timeday0from" class="control-label">Interval starts</label>
        <div class='input-group date' id='timeday0from'>
          <input type="text" class="form-control datepicker timeday0from" name="time[day][0][from]" readonly="readonly"/>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
          </span>
        </div>
      </div>
      <div class="form-group col-sm-4 col-xs-6">
        <label for="timeday0until" class="control-label">Interval ends</label>
        <div class='input-group date' id='timeday0until'>
          <input type="text" class="form-control datepicker timeday0until" name="time[day][0][until]" readonly="readonly"/>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
          </span>
        </div>
      </div>
      <div class="form-group col-sm-4 col-xs-12">
        <label for="timeday0info" class="control-label">Interval-Option</label>
        <select name="time[day][0][info]" class="form-control timeday0type" id="timeday0info">
          <option>Bitte auswählen</option>
        </select>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-default" onclick="duplicateElement();"><span class="glyphicon glyphicon-plus"></span></button>

<script>
$(document).ready(function() { 
  // 全局存储所有已确认的时间区间
  let timeIntervals = [];

  // 初始化单个时间区间组的函数
  function initTimeGroup(groupId) {
    const fromId = `timeday${groupId}from`;
    const untilId = `timeday${groupId}until`;
    
    // 初始化from选择器
    $(`#${fromId}`).datetimepicker({ 
      format: "LT", 
      allowInputToggle: true, 
      ignoreReadonly: true,
      disabledTimeIntervals: getDisabledIntervals(groupId) // 初始化时排除自身区间
    }); 
    // 初始化until选择器
    $(`#${untilId}`).datetimepicker({ 
      format: "LT", 
      allowInputToggle: true, 
      ignoreReadonly: true,
      disabledTimeIntervals: getDisabledIntervals(groupId)
    }); 

    // from变化时，设置until的minDate，并更新全局区间
    $(`#${fromId}`).on("dp.change", function(e) {
      const fromDate = e.date;
      $(`#${untilId}`).data("DateTimePicker").minDate(fromDate);
      
      // 更新当前组的区间
      updateInterval(groupId, fromDate, $(`#${untilId}`).data("DateTimePicker").date());
      // 重新应用禁用规则到所有其他组
      updateAllDisabledIntervals(groupId);
    }); 

    // until变化时，设置from的maxDate，并更新全局区间
    $(`#${untilId}`).on("dp.change", function(e) {
      const untilDate = e.date;
      $(`#${fromId}`).data("DateTimePicker").maxDate(untilDate);
      
      // 更新当前组的区间
      updateInterval(groupId, $(`#${fromId}`).data("DateTimePicker").date(), untilDate);
      // 重新应用禁用规则到所有其他组
      updateAllDisabledIntervals(groupId);
    });
  }

  // 获取排除指定groupId后的禁用区间
  function getDisabledIntervals(excludeGroupId) {
    return timeIntervals.filter(interval => interval.groupId !== excludeGroupId)
      .map(interval => [interval.start, interval.end])
      .filter(range => range[0] && range[1]); // 过滤掉未完全设置的区间
  }

  // 更新全局的时间区间数组
  function updateInterval(groupId, start, end) {
    // 先移除旧的区间
    timeIntervals = timeIntervals.filter(interval => interval.groupId !== groupId);
    // 只有当start和end都存在时，才添加新区间
    if (start && end) {
      timeIntervals.push({ groupId, start, end });
    }
  }

  // 更新所有其他组的禁用时间区间
  function updateAllDisabledIntervals(currentGroupId) {
    // 获取所有groupId
    const allGroupIds = $(".row[id^='day_']").map(function() {
      return parseInt(this.id.split("_")[1]);
    }).get();

    allGroupIds.forEach(groupId => {
      if (groupId === currentGroupId) return; // 跳过当前编辑的组
      
      const disabledIntervals = getDisabledIntervals(groupId);
      $(`#timeday${groupId}from`).data("DateTimePicker").disabledTimeIntervals(disabledIntervals);
      $(`#timeday${groupId}until`).data("DateTimePicker").disabledTimeIntervals(disabledIntervals);
    });
  }

  // 初始化第一个组
  initTimeGroup(0);

  // 克隆元素函数
  let i = 0; 
  const dayPrefix = "day_"; 
  const original = document.getElementById(dayPrefix + i); 
  window.duplicateElement = function() { 
    i++; 
    const clone = original.cloneNode(true); 
    clone.id = dayPrefix + i; 

    // 修正克隆后的元素ID和name
    // 处理from输入框及其父容器（datetimepicker绑定父容器ID）
    const fromContainer = clone.querySelector(".input-group.date#timeday0from");
    fromContainer.id = `timeday${i}from`;
    const fromInput = fromContainer.querySelector(".timeday0from");
    fromInput.id = `timeday${i}from`;
    fromInput.name = `time[day][${i}][from]`;
    fromInput.value = "";

    // 处理until输入框及其父容器
    const untilContainer = clone.querySelector(".input-group.date#timeday0until");
    untilContainer.id = `timeday${i}until`;
    const untilInput = untilContainer.querySelector(".timeday0until");
    untilInput.id = `timeday${i}until`;
    untilInput.name = `time[day][${i}][until]`;
    untilInput.value = "";

    // 处理select下拉框
    const selectElement = clone.querySelector(".timeday0type");
    selectElement.id = `timeday${i}info`;
    selectElement.name = `time[day][${i}][info]`;
    selectElement.value = "";

    // 添加到页面
    original.parentNode.appendChild(clone);
    // 初始化新克隆的时间组
    initTimeGroup(i);
  }
});
</script>

代码关键点说明 #

• initTimeGroup函数：统一处理单个时间组的初始化，包含选择器配置、minDate/maxDate绑定、时间变化时的全局更新逻辑。
• timeIntervals数组：实时记录所有已完成设置的时间区间，是禁用重叠规则的核心数据源。
• getDisabledIntervals：动态生成排除当前编辑组的禁用区间，确保编辑当前字段时不会被自身的时间范围限制。
• 克隆逻辑优化：修正了原代码中的选择器错误，同时确保datetimepicker绑定的父容器ID也被正确更新，避免插件失效。

内容的提问来源于stack exchange，提问作者Johannes C. Schulz