Add Date field with Datepicker in Magento

Here I want to show you how to add date field with date picker in any of your form like contact, gift message etc in magento frontend design. Magento has a built in library for calendar functionality but its available only on admin so here I show you how to se date field with date picker in magento frontend.

Add below css and javascript for calender in your current theme page.xml file. This will include all the calendar library functions frontend on your theme.

<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params></params></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name></action>
<block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"></block>

Now add below code in which form where you want to add date field like contact, gift message etc…

<div class="field">
    <label for="dob"><?php echo Mage::helper('contacts')->__('DOB') ?></label>
    <div class="input-box">
        <input name="dob" id="_dob" value="" type="text"> 
        <img title="Select date" id="_dob_trig" src="%3C?php%20echo%20Mage::getBaseUrl%28Mage_Core_Model_Store::URL_TYPE_SKIN%29%20.%20%27adminhtml/default/default/images/grid-cal.gif%27;%20?%3E" class="v-middle">
    </div>
 </div>

After that add below javascript code in bottom of your form.

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

Comments

comments