Add datepicker on frontend?

Question

We have developed a custom module for appointment. We need to get date of the appointment. We have added the below code in my custom page xml and phtml files

In XML file:

<reference name="head">
    <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params></params></action>
    <action method="addItem"><type>js</type><name>calendar/calendar.js</name><params></params></action>
    <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><params></params></action>
    <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
</reference>

In phtml file:

<input name="dob" id="_dob" value="" type="text">
    <img title="Select date" id="_dob_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle">

and in footer section of the page:

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

There is no JavaScript error, but calendar window does not open while clicking the calendar icon.

What I'm missing? Please help.

Answer 1

When I try your code I get a JS error:

Uncaught TypeError: Cannot read property 'length' of undefinedcalendar.js:1660 Date.parseDatecalendar-setup.js:21 triggerEl.(anonymous function)

If I add all of the initialization that goes along with the calendar above the footer calendar <script> then it works.

<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 = 0; // 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) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html 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:";

CalendarDateObject._LOCAL_TIMZEONE_OFFSET_SECONDS = -18000;
CalendarDateObject._SERVER_TIMZEONE_SECONDS = 1423128369;

//]]>
</script>

<!-- YOUR CALENDAR CODE BELOW LIKE THIS -->

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

Answer 2

In your front layout add below code

<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/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/>
 </reference>

add below code to your template file

<input type="text" name="date" id="date" value="" />
<img title="Select date" id="date_button" src="<?php echo $this->getSkinUrl('images/grid-cal.gif'); ?>" class="v-middle">

add below script below input date field

<script type="text/javascript">// <![CDATA[
  Calendar.setup({
   inputField : 'date',
   ifFormat : '%m/%e/%y %H:%M:%S',
   button : 'date_button',
   showsTime: true,
   align : 'Bl',
   singleClick : true
  });

    // ]]></script>