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');
    });

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

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

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

我应该提一下，我正在使用bootstrap 3.这个插件适用于v2。这是问题吗？

[更新]我尝试使用bootstrap 2.3.2 fiddle - 同样挂起date1选项，所以我猜它不是bootstrap版本。

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);

Bootstrap datepicker - 两个日期选择器更新彼此的开始/结束日期

1 个答案: