phpguru.org

Dynamic Calendar/date picker for Javascript

• About
• Example
• Alternative callback functions
• API
• Translating

About

This is a DHTML calendar/date selector. Can be used to enable selecting dates easier for the user. Works using layers, and should work on IE5+, NS6+, and Mozilla. Fully customisable, details on this below. Uses a user defined callback function to determine what to do with the selected date, passing the date/month/year to this function.

If your browser doesn't support the calendar (eg Opera) you will not see the calendar button below.

Example

Code used for this example

<link rel="stylesheet" media="screen" href="css/dynCalendar.css" />
<script language="javascript" type="text/javascript" src="javascript/browserSniffer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/dynCalendar.js"></script>

<form name="calendar_test">
    <input type="text" name="date_input1">
    <script language="JavaScript" type="text/javascript">
    <!--
        /**
        * Example callback function
        */
        function calendar1Callback(date, month, year)
        {
            document.forms['calendar_test'].date_input1.value = date + '/' + month + '/' + year;
        }

        calendar1 = new dynCalendar('calendar1', 'calendar1Callback');
    //-->
    </script>
</form>

Alternative callback functions

A copy of the example except it displays US style m/d/y

function exampleCallback_US(date, month, year)
{
    document.forms['calendar_test'].date_input1.value = month + '/' + date + '/' + year;
}

A copy of the example except it displays in ISO 8601 format (YYYY-MM-DD)

function exampleCallback_ISO(date, month, year)
{
    if (String(month).length == 1) {
        month = '0' + month;
    }

    if (String(date).length == 1) {
        date = '0' + date;
    }

    document.forms['calendar_test'].date_input1.value = year + '-' + month + '-' + date;
}

API

After creating the object you can use the following methods to affect the behaviour of the calendar.

setOffset(Xoffset, Yoffset)
Sets the X and Y offset to the mouse pointer that the calendar appears at.

setOffsetX(Xoffset)
Sets the X offset to the mouse pointer the calendar appears at.

setOffsetY(Yoffset)
Sets the Y offset to the mouse pointer the calendar appears at.

setImagesPath(path)
Sets the path to the images needed by the calendar.

setMonthCombo(true/false)
Sets whether a dropdown should be used for the month.

setYearCombo(true/false)
Sets whether a dropdown should be used for the year.

setCurrentMonth(month)
Sets the initial month to display, (0-11).

setCurrentYear(year)
Sets the initial year to display, (YYYY).

setYearComboRange(range)
Sets the number of years to display either side of the initial/current year in the dropdown.

And of course some example code...

<link rel="stylesheet" media="screen" href="css/dynCalendar.css" />
<script language="javascript" type="text/javascript" src="javascript/browserSniffer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/dynCalendar.js"></script>

<form name="calendar_test_2">
    <input type="text" name="date_input1">
    <script language="JavaScript" type="text/javascript">
    <!--
        function calendar2Callback(date, month, year)
        {
            document.forms['calendar_test_2'].date_input1.value = date + '/' + month + '/' + year;
        }

        calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
        calendar2.setMonthCombo(false);
        calendar2.setYearCombo(false);
        calendar2.setCurrentMonth(0);
        calendar2.setCurrentYear(2000);
    //-->
    </script>
</form>

Which produces...

Translating

Translating the DynCalendar is a very simple affair. The line you're looking for is this:

monthnames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

Simply change the month names to how you want them to appear. The day names are just as straightforward:

html += '<td class="dynCalendar_dayname">Sun</td>';
html += '<td class="dynCalendar_dayname">Mon</td>';
html += '<td class="dynCalendar_dayname">Tue</td>';
html += '<td class="dynCalendar_dayname">Wed</td>';
html += '<td class="dynCalendar_dayname">Thu</td>';
html += '<td class="dynCalendar_dayname">Fri</td>';
html += '<td class="dynCalendar_dayname">Sat</td></tr>';

Again, you can change these to whatever you choose.