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!

Acetophenetidin

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!

Masters

Hi, thanks for the answer. I tried what you said but it's not working. I guess the problem is that my function datepicker() is called twice: When i delete function InitEvents () from the common script on all my pages, the current scipt works properly and trigger the alert. What shall I do ... – Acetophenetidin

@Keyser_Soze: I edited my answer, after a few investigations I found out the problem. I also pubblished the test on jsFiddle but I think jsFiddle has some problem now that they moved on the cloud: the test works, but it doesn't anymore as long as I save it on my account :/ – Masters

The perfect answer! I try it on my website and it's working. Thanks for your help, I really appreciate it. – Acetophenetidin

A "more perfect" answer below - found here stackoverflow.com/a/9806960 – Bah

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.

Driest