Bootstrap Datepicker引发Uncaught RangeError栈溢出问题的修复咨询

这种随机触发的栈溢出问题在日期选择器联动场景里真的很头疼，我结合自己踩过的坑，给你梳理几个大概率的原因和对应的修复方案：

1. 日期联动事件互相触发导致无限递归 #

这是最常见的原因！很多人在做开始/结束日期联动时，给两个日期选择器都绑定了changeDate事件，并且在事件回调里互相设置对方的日期范围——如果没加控制逻辑，就会出现A触发B的事件，B又触发A的事件，无限循环直到栈溢出。

错误示例： #

// 这种写法会导致互相触发，随机出现栈溢出
$('#start-date').datepicker().on('changeDate', function(e) {
  $('#end-date').datepicker('setStartDate', e.date);
});

$('#end-date').datepicker().on('changeDate', function(e) {
  $('#start-date').datepicker('setEndDate', e.date);
});

修复方案： #

添加一个状态标志位，避免在更新日期范围时重复触发事件：

let isUpdatingDates = false;

// 初始化开始日期选择器
$('#start-date').datepicker({
  format: 'yyyy-mm-dd'
}).on('changeDate', function(e) {
  if (!isUpdatingDates) {
    isUpdatingDates = true;
    // 设置结束日期的最小可选值
    $('#end-date').datepicker('setStartDate', e.date);
    isUpdatingDates = false;
  }
});

// 初始化结束日期选择器
$('#end-date').datepicker({
  format: 'yyyy-mm-dd'
}).on('changeDate', function(e) {
  if (!isUpdatingDates) {
    isUpdatingDates = true;
    // 设置开始日期的最大可选值
    $('#start-date').datepicker('setEndDate', e.date);
    isUpdatingDates = false;
  }
});

2. jQuery与Datepicker版本不兼容 #

不同版本的jQuery和Bootstrap Datepicker可能存在内部方法冲突，比如旧版jQuery的事件处理逻辑和新版Datepicker的回调逻辑互相干扰，触发递归。

排查&修复： #

• 确认你使用的jQuery版本符合Datepicker的官方要求（比如Bootstrap Datepicker v1.9.0推荐jQuery 1.9.1+）
• 尽量使用匹配的稳定版本组合，避免混用过于老旧或最新的测试版库

3. 日期格式不匹配导致循环解析错误 #

如果传递给setStartDate/setEndDate的日期格式和插件初始化时设置的format不一致，插件内部可能会反复尝试解析日期，最终导致栈溢出。

错误示例： #

// 初始化时设置了yyyy-mm-dd格式
$('#start-date').datepicker({ format: 'yyyy-mm-dd' });
// 却传递了yyyy/mm/dd格式的字符串，插件解析失败后反复尝试
$('#end-date').datepicker('setStartDate', '2024/05/20');

修复方案： #

始终传递标准的Date对象，或者确保字符串格式和插件设置的format完全一致：

// 推荐：直接传递Date对象，避免格式问题
$('#end-date').datepicker('setStartDate', new Date(e.date));

// 或者：使用和插件格式一致的字符串
$('#end-date').datepicker('setStartDate', '2024-05-20');

4. 第三方插件/自定义事件的冲突 #

如果你的项目中还有其他jQuery插件，或者自定义了全局事件监听（比如$(document).on('change', ...)），可能会误触发日期选择器的内部事件，导致递归。

排查&修复： #

• 暂时禁用其他非必要插件，测试是否还会出现问题，逐步定位冲突源
• 检查全局事件监听，避免监听范围过大覆盖到日期选择器的输入框

5. 插件内部已知bug #

某些旧版本的Bootstrap Datepicker存在特定场景下的栈溢出bug（比如快速连续点击日期时）。

修复方案： #

升级到最新的稳定版本，同时查看官方issue列表，确认是否有类似问题的修复记录。

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