Datepicker onSelect [duplicate]

Question

I have an input [date_caisse] with class: datepicker-inline AND id: [date_caisse]

I have this function initialized on all my web pages:

function InitEvents () {

$('.datepicker-inline').datepicker({

    showButtonPanel: true,  /*added by oussama*/
    changeMonth: true, /*added by oussama*/
    changeYear: true, /*added by oussama*/
    firstDay: 1,
    dateFormat: 'yy-mm-dd',/*'dd/mm/yy'*/
    onSelect: function (dateText, inst) {
        //alert('select!');
        id = $(this).attr('id');
        parts = id.split('-');
        id2 = parts[parts.length -1];
        $('#datepicker-target-id-' + id2).val(dateText);
    }
});

}

I want to apply onSelect only on the current page, so this is what I did:

$('#date_caisse').datepicker({

    onSelect: function (dateText, inst) {
        alert('select!');
    }
});

When I put alert('select!'); on the main js file (which is called in all pages) it works! but it doesn't when I try to trigger the action through the current file.

Maybe, onSelect shouldn't be called twice.

So, anyone could help me please?

Thanks and have a good day!

Answer 1

Did you put your second function inside a jquery initialization block? I mean, it should looks like

$(function(){
   $('#date_caisse').datepicker({
      onSelect: function (dateText, inst) {
         alert('select!');
      }
   });
});

Edited:

Ok, I got it. The first time the datepicker is initialized, the original dom element is marked with a new class addition, called hasDatepicker that prevent subsequent initialization/reconfiguration. The way I found to get rid of it is to remove that marker befor doing any modification to the datepicker's configuration. Thus:

$(function() {
   $('#date_caisse').removeClass('hasDatepicker');
   $('#date_caisse').datepicker({
       onSelect: function(dateText, inst) {
           alert('overridden!');
       }
   });
});

Give it a try!

Answer 2

Note: the datepicker does not fire the change event for the element if you set the onSelect option.

If there is any chance you need to respond to the change event for the element you need to remember to fire the change event yourself when setting onSelect(), e.g.:

$(function(){
   $('#date_caisse').datepicker({
      onSelect: function (dateText, inst) {
         alert('select!');
         // Remember to fire the change event...
         if (inst.input) {
             inst.input.trigger('change');
         };
      }
   });
});

An alternative to using onSelect is to bind to the dateSelected event which the datepicker fires.