0

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

4

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);
});
| improve this answer | |
  • yes I am using magento-1.9, I think textbox onchange event is the only solution for now, will wait 2,3 days for better solution without using jQuery or will accept your solution as answer. Thanks – Ahmed Apr 29 '15 at 8:04
  • Thanks. I've edited the answer to include a PrototypeJS only solution. – Milan Simek Apr 30 '15 at 5:51
  • 1
    The issue is that the date form element doesn't assign the js calendar object to a variable, making it difficult or maybe impossible to add a onSelect callback function. It's of course possible to create a new form element extending on the Varien_Data_Form_Element_Date class, but using an observer for the input change event like in the answer above would be much simpler. – Milan Simek Apr 30 '15 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.