Dynamic Calendar/date picker for Javascript
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.