Bootstrap Datepicker切换下拉选项时DaysOfWeekDisabled不更新问题

我明白你碰到的这个坑了——Bootstrap Datepicker只会在第一次初始化时应用配置，后续重复调用datepicker()方法时，如果元素已经绑定了插件实例，它会直接跳过新的配置，这就是为什么切换下拉选项后日历规则没变化的原因。

你提到试过销毁后重新初始化但没解决，大概率是销毁的时机或者方式不对。正确的做法是在每次初始化新配置前，先彻底销毁已有的Datepicker实例，再重新创建。

修改后的完整代码 #

<select name="iEventType" id="iEventType" class="form-control select2">
  <option value="">Select Event Type</option>
  <option value="case1">case1</option>
  <option value="case2">case2</option>
  <option value="case3">case3</option>
</select>
<div class="input-field" id="event_type">
  <input type="text" class="form-control" placeholder="Select Day (Please Select Event Type First)" name="event_days" id="iEventDays" value="">
</div>
<script>
$("#iEventType").change(function() {
  var val = $(this).val();
  
  // 关键步骤：先销毁已存在的Datepicker实例，确保旧配置被清除
  $('#iEventDays').datepicker('destroy');
  
  if (val == "case1" || val == "case2") {
    var disabled_day = [0, 2, 5, 6];
    $('#iEventDays').datepicker({ 
      startDate: new Date(), 
      autoclose: true, 
      format: 'mm/dd/yyyy', 
      daysOfWeekDisabled: disabled_day 
    });
  } else if (val == "case3") {
    var disabled_day = [0, 5, 6];
    $('#iEventDays').datepicker({ 
      startDate: new Date(), 
      autoclose: true, 
      format: 'mm/dd/yyyy', 
      daysOfWeekDisabled: disabled_day 
    });
  } else {
    $("#iEventDays").val("");
    // 清空选项时也要销毁实例，避免点击输入框弹出旧日历
    $('#iEventDays').datepicker('destroy');
  }
});
</script>

关键细节说明 #

1. 强制销毁旧实例：每次下拉选项变化时，先调用datepicker('destroy')，这个方法会移除插件绑定的所有事件、DOM元素和配置，确保新的初始化是完全干净的。
2. 清空选项的处理：当选择空选项时，除了清空输入框，还要再次销毁Datepicker实例，防止用户点击输入框时弹出带有旧规则的日历。
3. 确认方法兼容性：确保你使用的Bootstrap Datepicker版本支持destroy方法（目前主流的官方版本和衍生版本都支持这个方法）。

如果之前销毁后仍无效，可能是你只在部分分支执行了销毁操作，而没有在每次初始化前都执行——现在这种每次change事件触发都先销毁的方式，就能确保每次切换都应用最新的配置了。

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