Bootstrap Datepicker 日期范围选择器无法清除日期问题求助

我之前刚好踩过Bootstrap Datepicker 1.6.1版本的这个坑——单个日期选择器用clearDates没问题，但范围选择器就完全没反应。下面给你几个亲测有效的解决方案：

方案一：手动清空输入框+同步选择器状态 #

这个方法最稳妥，不管版本有没有bug都能生效。直接清空所有日期输入框的内容，再调用update方法让选择器同步内部状态：

$(document).on("click", ".clear-btn", function() {
  // 清空所有带.date类的日期输入框
  $(".date").val('');
  // 同步日期选择器的内部状态，避免显示残留的选中日期
  $(".date").datepicker('update');
});

原理是：1.6.1版本的clearDates对关联的范围选择器处理不彻底，但直接修改输入框值再触发更新，能强制让两个选择器都回到初始状态。

方案二：分别调用单个选择器的clearDates #

如果你的范围选择器是两个独立的实例（比如分别绑定了startDate和endDate），可以单独给每个实例调用clearDates：

$(document).on("click", ".clear-btn", function() {
  // 假设范围选择器的两个输入框id分别为start-date和end-date
  $("#start-date").datepicker("clearDates");
  $("#end-date").datepicker("clearDates");
});

这样能确保两个选择器都接收到清除指令，不会因为批量选择器调用而遗漏其中一个。

方案三：升级Datepicker版本（推荐） #

1.6.1是比较老旧的版本了，后续的版本（比如1.9.0及以上）修复了很多这类方法兼容性问题。如果项目允许升级，直接更新到新版本后，原来的$(".selector").datepicker("clearDates")就能正常批量清除范围选择器的日期了。

小提醒 #

如果你的清除按钮是动态生成的，一定要用事件委托（比如$(document).on("click", ...)）来绑定点击事件，避免按钮加载完成后事件绑定失效。

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