Datepicker onSelect

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!