Magento:: Add Datepicker to contact form

“Magento has a built in library for calendar functionalities. However the calendar library is available only on Admin pages like Customer Grid,Customer Account view page,Sales order Grid etc. We can extend the prototype Javascript library’s calendar functions to frontend.

 Step 1: Edit the page.xml file in your current theme in the directory
 app/design/frontend/default/yourthemename/layout/page.xml
 Around line 37(according to magento 1.9) add the below lines in between

<!-- Add custom js for calendar -->
                <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name></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" />

The Above lines will include the calendar library functions in the page head of all front end pages.

Step 2: Next Step is to add the Date Field in Magento Form. For this example iam adding a date field called dob(date of birth) in the magento contact form. Iam calling the magento skin url as getSkinUrl().’images/calendar.gif'; ?> to include the calendar.gif image.
Note: You need to copy the image from base  and paste it in your current theme.
app/design/frontend/yourthemename/default/template/contacts/form.phtml

<li class="fields">
    <div class="field">
        <label for="dob"><?php echo Mage::helper('contacts')->__('DOB') ?></label>
        <div class="input-box">
            <input name="dob" id="_dob" title="<?php echo Mage::helper('contacts')->__('DOB'); ?>" value="" class="input-text" type="text" />
        </div>
    </div>
    <div class="field">
        <label for="calendar">&nbsp;</label>
        <div class="input-box">
            <img style="" title="Select Date" id="_dob_trig" class="v-middle" alt="" src="<?php echo $this->getSkinUrl().'images/calendar.gif' ?>"
        </div>
    </div>
</li>

Step 3: Next step would be to add some Javascript code in the contact form template file. The id of the date input field and calendar image should be the same. In our case the id is “_dob_trig” . The javascript code shown below should be added below the contact form coding.

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

Step 4: To get the date value in the contact form email add the following line in the emailtemplate app/locale/en_US/template/email/contact_form.html
Date Of Birth: {{var data.dob}}
Once the form is submitted all the form data will be emailed to the store admin.
Step 5: Now  if the calendar icon is clicked the date will be populated and the selected date will be populated in the textbox.