0

我正在使用来自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，则代码按预期工作。

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

这是一个实际上不会使浏览器崩溃的小提琴，但它在选择第一个日期时确实会挂起一秒钟。

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

[更新] 我尝试了使用 bootstrap 2.3.2 的小提琴- 同样挂在 date1 选择上，所以我猜它不是 bootstrap 版本。

4

1 回答 1

1

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

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

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

var me = this;

...

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

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

on("changeDate", handleDateChange);
于 2013-09-08T23:41:03.070 回答