Magento date time picker in front end form

Some times there is requirement of date time picker in your frontend form. Mostly for this developers usually use jQuery. But it is not a right way to do this. Magento do have date time picker library which is for admin form only. But with some customization we can use it in our frontend form as well. Following steps you need to follow to achieve this.

First of all open your form’s layout xml file (app/design/frontend/your_package/your_theme/layout/your_layout.xml) and put following code in it :

[php]

<reference name="head">

< 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/lang/calendar-en.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>

</reference>

[/php]

Till now all the required js files are added in your form’s layout. Now put the following code at the top of your form’s template file (aa/design/frontend/your_package/your_theme/template/your_module/form.phtml).

[php]

<script type="text/javascript">

//<![CDATA[

enUS = {"m":{"wide":["January","February","March","April","May","June","July","August",
"September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
"Sep","Oct","Nov","Dec"]}}; // en_US locale reference
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names

Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names

Calendar._FD = 1; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc.

Calendar._MN = ["January","February","March","April","May","June","July","August",
"September","October","November","December"]; // full month names

Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names

Calendar._am = "AM"; // am/pm

Calendar._pm = "PM";

// tooltips

Calendar._TT = {};

Calendar._TT["INFO"] = "About the calendar";

Calendar._TT["ABOUT"] =

"DHTML Date/Time Selector\n" +

"(c) <a href="http://dynarch.com/" target="_blank">dynarch.com</a> 2002-2005 / Author: Mihai Bazon\n" +

"For latest version visit:<a href="http://www.dynarch.com/projects/calendar/%5Cn" target="_blank">http://www.dynarch.com/projects/calendar/\n</a>" +

"Distributed under GNU LGPL. See <a href="http://gnu.org/licenses/lgpl.html" target="_blank">http://gnu.org/licenses/lgpl.html</a> for details." +

"\n\n" +

"Date selection:\n" +

"- Use the \xab, \xbb buttons to select year\n" +

"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +

"- Hold mouse button on any of the above buttons for faster selection.";

Calendar._TT["ABOUT_TIME"] = "\n\n" +

"Time selection:\n" +

"- Click on any of the time parts to increase it\n" +

"- or Shift-click to decrease it\n" +

"- or click and drag for faster selection.";

Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";

Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";

Calendar._TT["GO_TODAY"] = "Go Today";

Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";

Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";

Calendar._TT["SEL_DATE"] = "Select date";

Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";

Calendar._TT["PART_TODAY"] = ‘ (‘ + "Today" + ‘)’;

// the following is to inform that "%s" is to be the first day of week

Calendar._TT["DAY_FIRST"] = "Display %s first";

// This may be locale-dependent. It specifies the week-end days, as an array

// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1

// means Monday, etc.

Calendar._TT["WEEKEND"] = "0,6";

Calendar._TT["CLOSE"] = "Close";

Calendar._TT["TODAY"] = "Today";

Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";

// date formats

Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";

Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";

Calendar._TT["WK"] = "Week";

Calendar._TT["TIME"] = "Time:";

//]]>

</script>

<!– put this textbox at your desired position –>

< span class="label">Date</span>

< input name="date" id="date" type="text">

< img src="<strong><?php</strong>echo $this->getSkinUrl(<strong>’images/grid-cal.gif'</strong>) <strong>?></strong>" alt="" id="date_trig" title="Date selector">

< /div><script type="text/javascript">

Calendar.setup({

inputField : "date",

ifFormat : "%e/%m/%y",

button : "date_trig",

showsTime: false,

align : "Bl",

singleClick : true

});

< /script>

[/php]

Now clear the magento cache. If calendar image is not rendering then check its path.

That’s it. Hope this will help you.