Datepicker onselect

Question

I have an input [date_caisse] with a 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 a warning ('select!'); in the main js file (which is called on all pages) it works! but this does not happen when I try to trigger an action through the current file.

Perhaps onSelect should not be called twice.

So can anyone help me?

Thanks and had a good day!

Answer 1

Have you added a second function to the jquery initialization block? I mean, it should look like

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

Edited by:

OK I understood. When the datepicker is initialized for the first time, the original dom element is marked with a new class addition called hasDatepicker, which prevents subsequent initialization / reconfiguration. The way I found to get rid of it is to remove this token to make any changes to the datepicker configuration. Thus:

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

Give it a try!

Answer 2

Note. datepicker does not fire a change event for an element if you set the onSelect parameter.

If there is a possibility that you need to respond to the change event for an element that you need to remember in order to fire the change event yourself when setting onSelect() , for example:

 $(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 that datepicker fires.