Bootstrap Datepicker变更起始日期后，结束日期限制未更新问题求助

我完全明白你碰到的问题——第一次选起始日期时结束日期的限制正常，但修改起始日期后，结束日期的可选范围却没跟着同步更新。这是因为你当前的代码逻辑存在一个小问题：每次触发起始日期的change事件时，你都重新初始化了一次结束日期的Datepicker实例，但重复初始化并不会覆盖旧的配置规则，反而会让旧的限制依然生效。

正确的解决方案 #

咱们可以通过两种方式解决这个问题，推荐第一种更简洁高效的方法：

方法1：使用内置API动态更新限制

先一次性初始化两个Datepicker实例，之后在起始日期变更时，用Bootstrap Datepicker提供的setStartDate方法直接更新结束日期的起始限制：

let format = 'yyyy-mm-dd';

// 初始化起始日期选择器
$('.start-date').datepicker({
  startDate: new Date(),
  format: format,
  autoclose: true
});

// 先初始化结束日期选择器（初始最小日期设为今天）
$('.end-date').datepicker({
  startDate: new Date(),
  format: format,
  autoclose: true
});

// 监听起始日期变化，动态更新结束日期的限制
$('.start-date').on("change", function() {
  const selectedStartDate = $(this).val();
  $('.end-date').val(''); // 清空之前选中的结束日期
  // 使用setStartDate更新结束日期的起始可选日期
  $('.end-date').datepicker('setStartDate', selectedStartDate);
});

方法2：销毁旧实例后重新初始化

如果你更倾向于重新初始化的方式，记得要先销毁掉旧的Datepicker实例，再创建新的：

let format = 'yyyy-mm-dd';

// 初始化起始日期选择器
$('.start-date').datepicker({
  startDate: new Date(),
  format: format,
  autoclose: true
});

// 监听起始日期变化
$('.start-date').on("change", function() {
  const selectedStartDate = $(this).val();
  $('.end-date').val('');
  
  // 先销毁旧的结束日期Datepicker实例
  $('.end-date').datepicker('destroy');
  
  // 重新初始化结束日期选择器
  $('.end-date').datepicker({
    startDate: selectedStartDate,
    format: format,
    autoclose: true
  });
});

为什么原来的代码不生效？ #

你之前的代码每次触发change事件都调用$('.end-date').datepicker(...)，这会给同一个DOM元素绑定多个Datepicker实例。旧实例的起始日期限制并没有被移除，所以即使你设置了新的startDate，旧的限制依然在起作用，导致看起来结束日期的范围没有更新。

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