Magento date time picker in front end form

08 / Mar / 2013 by shahid 4 comments

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 :


<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>



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).


<script type="text/javascript">


enUS = {"m":{"wide":["January","February","March","April","May","June","July","August",
"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="" target="_blank"></a> 2002-2005 / Author: Mihai Bazon\n" +

"For latest version visit:<a href="" target="_blank">\n</a>" +

"Distributed under GNU LGPL. See <a href="" target="_blank"></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:";



<!– 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">


inputField : "date",

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

button : "date_trig",

showsTime: false,

align : "Bl",

singleClick : true


< /script>


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

That’s it. Hope this will help you.


comments (4)

  1. vaseem ansari

    this calendar is working fine but it is not able to disable the old dates in mageno 1.9. do u have a idea how to show dependent calendar in magento frontend.

  2. Vips

    It is working perfectly, however I have a query

    How to Collect the Selected Date and display it in the Customer Email and order pdf?

  3. Amit Tripathi

    Now We will DISABLE past Dates.

    (it is advisable to add custom calendar template, as in any upgrade you will lose your modifications)

    Use the folowing to disable the previous dates:
    //getId() . ‘”,
    ifFormat : “‘ . $displayFormat . ‘”,
    showsTime : “‘ . ($this->getTime() ? ‘true’ : ‘false’) . ‘”,
    button : “‘ . $this->getId() . ‘_trig”,
    align : “Bl”,
    singleClick : true,
    disableFunc: function(date) {
    var now= new Date();
    if(date.getFullYear() < now.getFullYear()) { return true; }
    if(date.getFullYear() == now.getFullYear()) { if(date.getMonth() < now.getMonth()) { return true; } }
    if(date.getMonth() == now.getMonth()) { if(date.getDate() < now.getDate()) { return true; } }

  4. Pi Code

    I have managed to implement a date picker input field in my custom back end page. The question is how to get selected date in my custom controller?

    Can you help me with that?


Leave a Reply

Your email address will not be published. Required fields are marked *