Thursday 3 July 2014

Date Picker in any form in Magento

open page.xml and put below code in 

<block type="page/html_head" name="head" as="head">between</block>

<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>

<block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"></block>

now put below code where you want to show calendar:

<div class="field">
  <label for="delivery_date"><?php echo $this->__('Delivery Date') ?></label>
  <div class="input-box">
      <input type="text" id="_dob" name="delivery_date" class="input-text required-entry" /><em>*</em>
      <img title="Select date" id="_dob_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif');?>" class="v-middle" />
   </div>
</div>

<script type="text/javascript">
//<![CDATA[
Calendar.setup({
inputField : '_dob',
ifFormat : '%m/%e/%y',
button : '_dob_trig',
align : 'Bl',
singleClick : true
});
//]]>
</script>