bootstrap-datepicker not picking change event on input

Question

I have an input in which I want to edit a date. When the value of the input changes, I want to execute a callback.

If I call the function datepicker (from bootstrap-datepicker https://github.com/eternicode/bootstrap-datepicker) I can no longer hook to the change event. (Strange enough, other events seem to work ok)

This is what I tried so far:

(using backbone)

events: {
  'changeDate :input' : 'onUpdateField'
},

or using directly jquery

$('#Fundacion').on('change', this.onUpdateField);

If I just comment the following line

$('#Fundacion').datepicker({
  autoclose : true,
[...]

The event is called.

On the other hand, the changeDate evet is called, but only when the date is changed using the mouse or the arrows. I want to catch the event when the user just types a different date.

I tried having a look at the source (https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js) but I couldn't find where it might be "swallowing" the change event.

Answer 1

This is not a recommended way, but a dirty workaround. Just keep checking for the date field after 500 milliseconds (or as per your requirements).

var current = $('.transaction-date').val();
function keep_checking() {

    if (current != $('.transaction-date').val()) {
        alert('change happened');
        current = $('.transaction-date').val();
    }
    setTimeout(keep_checking, 500);
}
keep_checking();

UPDATE

If you use the following library then it'll fire an event 'changeDate' when the date is changed. Look and feel is very similar to the eternicode datepicker

http://www.eyecon.ro/bootstrap-datepicker/

Example usage:

jQuery('#dp1').datepicker().on('changeDate', function(ev){
     alert('date is changed');
});

Answer 2

In my case it was enough to do two simple steps:

1. Add change event listener to input (it will catch the event when the user types a different date)

   $('#dateInput').on(change, doSomethingOnChange);
   

2. Add datepicker changeDate event (it will trigger change event from first step when date is changed using the mouse or arrows)

   input.datepicker().on('changeDate', function(){
       $(this).trigger('change');
   });