Bootstrap 日期选择器 - 两个日期选择器相互更新开始/结束日期

Question

我正在使用来自eternicode 的 bootstrap-datepicker 小部件。

我希望我的页面上有两个日期选择器，每个更新另一个；

• 更改 date1 应设置 date2 的开始日期。
• 更改 date2 应设置 date1 的结束日期。
• 这两个日期最初都应显示今天的日期。

这是我目前所拥有的

var month = ("January February March April May June July August September October November December").split(" ");
var now = new Date();
var nowformatted = now.getDate() + " " + month[now.getMonth()] + " " + now.getFullYear();
var dpOptions = {
    format: 'dd MM yyyy',
    startDate: now,
    setDate: now,
};
var datePicker1 = $("#date1").
    val(nowformatted).
    datepicker(dpOptions).
    on('changeDate', function (e) {
            datePicker2.datepicker('setStartDate', e.date);
            datePicker2.datepicker('update');
    });

var datePicker2 = $("#date2").
    val(nowformatted).
    datepicker(dpOptions).
    on('changeDate', function (e) {
            datePicker1.datepicker('setEndDate', e.date);
            datePicker1.datepicker('update');
    });

但如果 date1 在 date2 之前更改，则会导致 chrome 和 FF 崩溃。如果先更改 date2，则代码按预期工作。

我可以使用一些输入来判断这是插件中的错误还是我编写实现的方式。

这是一个fiddle，它实际上并没有使浏览器崩溃，但它在选择第一个日期时会挂起一秒钟。

我应该提到我正在使用 bootstrap 3。这个插件是为 v2 设计的。这是问题吗？

[更新] 我尝试使用引导程序 2.3.2 的fiddle - 同样挂起 date1 选择，所以我猜它不是引导程序版本。

Answer 1

您的日期控件正在为第二个控件设置日期，该控件有一个changeDate 处理程序来更新第一个控件的日期；其中有一个changeDate 处理程序来更新第二个控件的日期...看看发生了什么？

您可以使用console.log() http://jsfiddle.net/vG6qF/3/ 轻松查看此递归

一种解决方案是在日期范围更改时丢弃日期控件，并为另一个控件创建一个新的 datepicker 实例。

var me = this;

...

on("changeDate", function(e) {
    me.datepicker2 = null;
    me.datepicker2 = $("#date2").datepicker({ options });
});

也许您应该为changeDate 处理程序创建一个可重用函数来代替匿名处理程序。

on("changeDate", handleDateChange);