How to add Datepicker to Magento Forms

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 65 add the below lines in between

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.

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.

Step 4: Now now if the calendar icon is clicked the date will be populated and the selected date will be populated in the textbox.

Step 5: 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.

Requirement :- Magento 1.4