bootstrap-datepicker icon indicating copy to clipboard operation
bootstrap-datepicker copied to clipboard

changeDate firing multiple times for the same input and date

Open jfsiii opened this issue 11 years ago • 19 comments

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)


jfsiii avatar Apr 24 '14 15:04 jfsiii

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

sarus avatar Apr 25 '14 05:04 sarus

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.

mateomurphy avatar Apr 29 '14 17:04 mateomurphy

I put the event on the 'hide':

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

And then fires once

gorkovv avatar Sep 12 '14 06:09 gorkovv

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

neoecos avatar Feb 09 '15 23:02 neoecos

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!

acrobat avatar Feb 10 '15 08:02 acrobat

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
}       

Magzter avatar May 13 '15 11:05 Magzter

is the bug still not fixed?

ldsenow avatar Jun 23 '15 02:06 ldsenow

@ldsenow that bug is still marked as open.

hebbet avatar Jun 23 '15 06:06 hebbet

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 }

});

acsar avatar Sep 08 '15 13:09 acsar

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

ghost avatar Oct 04 '16 14:10 ghost

Amazing bug!!!

asgardia7 avatar Jan 12 '17 09:01 asgardia7

Any ETA on the fix?

garfbradaz avatar Mar 13 '17 19:03 garfbradaz

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

VelPrakalathan avatar Mar 16 '17 05:03 VelPrakalathan

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.

z3r0101 avatar Oct 28 '17 06:10 z3r0101

what should i do to fix this issue

wildantea avatar Nov 04 '18 15:11 wildantea

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

jurchiks avatar Jan 21 '20 15:01 jurchiks

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

baset-sarker avatar Oct 18 '20 11:10 baset-sarker

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

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

it works

fangbaogang avatar Mar 04 '21 09:03 fangbaogang

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

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

Working good!! Thanks @baset-sarker

Yuvaraj-A-27 avatar Sep 10 '23 04:09 Yuvaraj-A-27