Monday 28 November 2011

Add Date field with Datepicker in Magento Contact Form

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

Edit the page.xml file in your current theme in the directory app/design/frontend/default/your-theme/layout/page.xml Around line 61 add the below lines in between

 
js_csscalendar/calendar-win2k-1.css
jscalendar/calendar.js
jscalendar/calendar-setup.js

This will include the calendar library functions in the page head of all front end pages.

Now add Date Field to your contact form

Next step would be to add Javascript code at bottom of contact form template file. The id of the date input field and calendar image should be the same. The javascript code shown below should be added below the contact form coding.


1 comment: