Bootstrap-datepicker: changeDate firing multiple times for the same input and date

[jfsiii]

From http://jsfiddle.net/JFSIII/ZQ5pu/2/

// open start and choose a date
<input type=​"text" class=​"input-sm form-control" name=​"start">​
 "is now" Tue Apr 01 2014 00:00:00 GMT-0700 (PDT)

// while start is open, choose another date
<input type=​"text" class=​"input-sm form-control" name=​"start">​
 "is now" Sun Apr 20 2014 00:00:00 GMT-0700 (PDT)
<input type=​"text" class=​"input-sm form-control" name=​"start">​
 "is now" Sun Apr 20 2014 00:00:00 GMT-0700 (PDT)

[sarus]

Seems like it might be firing an event for the old date being cleared, and then the new date being set. If you click on the same date twice it doesn't double fire the event.

Possibly related to this? #873

[mateomurphy]

Running into the same issue, the two events have different stack traces:

jQuery.event.dispatch
elemData.handle
jQuery.event.trigger
(anonymous function)
jQuery.extend.each
jQuery.fn.jQuery.each
jQuery.fn.extend.trigger
Datepicker._trigger
Datepicker.setUTCDates
(anonymous function)
DateRangePicker.dateUpdated
proxy
jQuery.event.dispatch
elemData.handle
jQuery.event.trigger
(anonymous function)
jQuery.extend.each
jQuery.fn.jQuery.each
jQuery.fn.extend.trigger
Datepicker._trigger
Datepicker._setDate
Datepicker.click
proxy
jQuery.event.dispatch
elemData.handle

jQuery.event.dispatch
elemData.handle
jQuery.event.trigger
(anonymous function)
jQuery.extend.each
jQuery.fn.jQuery.each
jQuery.fn.extend.trigger
Datepicker._trigger
Datepicker._setDate
Datepicker.click
proxy
jQuery.event.dispatch
elemData.handle

Looking at the code: https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js#L1276 Datepicker is listening to its own "changeDate" event to update it's info, and triggering another "changeDate" event in the process, with a guard condition to prevent recursion.

[gorkovv]

I put the event on the 'hide':

$('#datepicker').datepicker() .on('hide', function(e){...}

And then fires once

[neoecos]

This is really an annoying bug, the 'hide' solution, calls event when the date is not changed, so is ugly.

[acrobat]

this is indeed a long outstanding bug and there are several issues about this. But we will try to tackle this issue as soon as possible! If any of you guys already have a solution, please create a PR!

[Magzter]

I had AJAX calls bound to my onChange event so this was a pain.
Alternative solution found on stackoverflow:

It just compares the timestamp of the last event, and if it was less than 300 milliseconds ago it won't proceed.

// Global Variable
var lastJQueryTS = 0 ;

// Where your onChange event fires, put this at the top
if (typeof(event) == 'object'){
    if (event.timeStamp - lastJQueryTS < 300){
        send = false;
    }
    lastJQueryTS = event.timeStamp;
}
if (send) {
    // Proceed with your code
}       

[ldsenow]

is the bug still not fixed?

[hebbet]

@ldsenow that bug is still marked as open.

[acsar]

I so:

var data_ida;
var data_volta;

var days_of_week_disabled = $('#form_reserva_add').data('days_of_week_disabled');

$('#reserva_add_v .input-daterange').datepicker({
format: 'dd/mm/yyyy',
startDate: '05/09/2015',
language: 'pt-BR',
multidate: false,
daysOfWeekDisabled: days_of_week_disabled,
autoclose: true,
todayHighlight: true,
datesDisabled: ['09/06/2015', '09/21/2015']
}).on('changeDate', function(event) {
if (data_ida != $('#data_ida').val() || data_volta != $('#data_volta').val()) {
data_ida = $('#data_ida').val();
data_volta = $('#data_volta').val();
console.log(data_ida + ' - ' + data_volta); <== your funciont here
}

});

[ghost]

Still there in v 1.6.4
2 years and no fix!?!?!?

[asgardia7]

Amazing bug!!!

[garfbradaz]

Any ETA on the fix?

[VelPrakalathan]

Simple

var count_date_picker = 0 ;
function get_date(){
count_date_picker++;
if(count_date_picker ==1){
var filter_date = $('.date').val();
alert( filter_date );
count_date_picker=-2;
}
}

[z3r0101]

The only solution for this is modify the "bootstrap-datepicker.js"
Look for this._trigger('changeDate');

Simply comment out the line or you can put some conditions. It's up to you.

[wildantea]

what should i do to fix this issue

[jurchiks]

Holy crap, it's been literally almost 6 years on an ACTIVELY DEVELOPED PROJECT and this bug still hasn't been fixed! WTF people?

[baset-sarker]

Just change it to...
.on('changeDate',function() { do_staff(); });

it works ,I found this from below answer
https://github.com/uxsolutions/bootstrap-datepicker/issues/1233#issuecomment-266705260

[fangbaogang]

Just change it to...
.on('changeDate',function() { do_staff(); });

it works ,I found this from below answer
#1233 (comment)

it works