CODEWITHSUNDEEP
jquerytwitter-bootstrapdatepicker
gpcola
gpcola

Reputation: 1009

Bootstrap datepicker - two datepickers updating each others start/end dates

I'm using the bootstrap-datepicker widget from eternicode.

I want two date pickers on my page, each updating the other;

Here's what I have so far

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

but it's causing chrome and FF to crash if date1 is changed BEFORE date2. If date2 is changed first then the code works as intended.

I could use some input on whether this is a bug in the plugin or in the way I've coded my implementation.

Here's a fiddle that doesn't actually crash the browser but it does hang for a second on selecting the first date.

I should mention that I'm using bootstrap 3. This plugin was intended for v2. Is this the problem?

[update] I tried a fiddle with bootstrap 2.3.2 - same hang on date1 selection so I'm guessing it's not the bootstrap version.

Upvotes: 0

Views: 4298

Answers (1)

Jasen
Jasen

Reputation: 14250

Your date control is setting the date for the 2nd control which has a changeDate handler to update the date on the 1st control; which has a changeDate handler to update the date on the 2nd control which... see what's happening?

You can easily see this recursion with a console.log() http://jsfiddle.net/vG6qF/3/

One solution is to discard a date control when the date range changes and make a new instance of datepicker for the other control.

var me = this;

...

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

Perhaps you should make a reusable function for the changeDate handler in place of the anonymous one.

on("changeDate", handleDateChange);

Upvotes: 1

Related Questions