Magento Calender with onSelect event

Question

I am trying to capture magento's calender date-select event, haven't found anything about any where, but I already know magento is using jQuery UI calender so I looked into jQuery UI documentation and found that onSelect event is on their list using which I can capture the event.

here is the code I had written :

Calendar.setup({
   inputField  : 'store_date',
   ifFormat    : '%m/%e/%y',
   button      : 'store_date_trig',
   align       : 'Bl',
   onSelect: function(dateText,selectedDate) {
        console.log(selectedDate);
   }
}); 

event is getting called but the problem is after selecting a date calender doesn't hide with single click but I have do double click on date to hide the calender also textbox (inputField) is not getting updated after date select.

Thanks

Answer 1

It seems you are mixing up Magento 1.x and Magento 2.

The code you posted is for Magento 1.x:

Calendar.setup({
   inputField  : 'store_date',
   ifFormat    : '%m/%e/%y',
   button      : 'store_date_trig',
   align       : 'Bl',
   onSelect: function(dateText,selectedDate) {
        console.log(selectedDate);
   }
}); 

According to the docs the Magento 2.x code looks as follows:

 $("#calendar_id").calendar({
      dateFormat: "M/d/yy",
      showsTime: true,
      timeFormat: "h:mm a",
      buttonImage: "image.gif",
      buttonText: "Select Date"
   })

It seems Magento 1.x is using this calendar script: http://www.dynarch.com/jscal/

Possible fix:

If you're using jQuery you can do the following:

jQuery('#store_date').change(function(){
    //your logic here, for example:
    console.log(jQuery(this).val())
})

The following does the same using PrototypeJS (which is incorporated in Magento 1.x by default):

$("store_date").observe("change", function(event) {
   console.log(event.target.value);
});