Monday, August 12, 2013

Magento add datepicker to frontend

Code referece:

http://stackoverflow.com/questions/8335456/magento-how-do-i-add-a-frontend-date-picker-that-returns-dd-mm-yy-instead-of-m


STEPS:
1. Add js and css necessary for the datepicker in frontend
<reference name="head">
        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference>
 
2.
 <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/> 

3.call that block in the phtml file where u want to implement datepicker.
<?php echo $this->getChildHtml('html_calendar') ?>
 
4. Last use the below code:
 
<script type="text/javascript">
  Calendar.setup({
  inputField : 'deliverydate',
  ifFormat : '%m/%e/%y',
  button : 'date_from_trig',
  align : 'Bl',
  singleClick : true
  });
</script> 

4 comments:

  1. Magento platform offers wonders for those who want to manage, handle and control online activities of business in a better manner. Magento development technology really does the wonders!

    ReplyDelete
  2. Kindly name files where the code is supposed to be pasted...

    ReplyDelete
  3. magento extension development are the most experienced developers in their respective fields.I highly appreciate that you have shared info along with your name increasing your credibility.

    ReplyDelete