A javascript date picker. This script uses a modified version of my 'Higly Customizable Javascript Calendar Script' (http://www.weberdev.com/get_example-4482.html). In Internet Explorer, the previously selected date can be passed. In Firefox and Opera, the current date will be shown first.
Please see attached file above.
date-picker.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Date Picker</title>
<style type="text/css">
body{margin:0px;padding:0px;}
a{text-decoration:none;}
.CalendarRed{width:100%;height:100%;}
.CalendarRed td{border:1px #F3F3F3 solid;text-align:center;}
.CalendarRed td.SelectedDay{background:#E5E5E5;color:red;}
.CalendarRed tr.TitleBar td{font-weight:bold;background:#ED0000;color:#FFF;}
.CalendarRed tr.TitleBar td a{color:#FFFFFF;}
.CalendarRed tr.Days td{}
.CalendarRed tr.Days td a{color:#000000;}
.CalendarRed tr.Days td a:hover{background:#FFCCCC;}
.CalendarRed .WeekName td{font-weight:bold;}
.CalendarRed{border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#FFFFFF;border:1px red solid;}
</style>
<script type="text/javascript">
<!--
ReturnFunc = '';
function Calendar(iYear, iMonth, iDay, ContainerId, ClassName)
{
MonthNames = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
//If no parameter is passed use the current date.
oDate = new Date();
Year = (iYear == null) ? oDate.getFullYear() : iYear;
Month = (iMonth == null) ? oDate.getMonth() : iMonth - 1;
while(Month < 0){Month += 12;Year--}
while(Month >= 12){Month -= 12;Year++}
Day = (iDay == null) ? 0 : iDay;
oDate = new Date(Year, Month, 1);
NextMonth = new Date(Year, Month + 1, 1);
WeekStart = oDate.getDay();
// Get the number of months in current month
MonthDays = Math.round((NextMonth.getTime() - oDate.getTime()) / 86400000) + 1;
// Check whether the Container Id is null
if(ContainerId != null)
{
ContainerId = ContainerId;
Container = document.getElementById(ContainerId);
// If an element doesnot exists with the given ContainerId then create it
if(!Container)
document.write('<div id="' + ContainerId + '"> </div>');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId));
// create an element with the new id
document.write('<div id="' + ContainerId + '"> </div>');
}
Container = document.getElementById(ContainerId);
ClassName = (ClassName == null) ? 'tblCalendar' : ClassName;
HTML = '<table class="' + ClassName + '" cellspacing="0">';
// Title bar
HTML += '<tr class="TitleBar"><td class="Nav"><a href="javascript:void(0)" onMouseDown="Calendar(' + Year + ', ' + Month + ', ' + Day+', \''+ContainerId+'\', \''+ClassName+'\');">«</a></td><td colspan="5" class="Title">' + MonthNames[Month] + ' ' + Year + '</td><td class="Nav"><a href="javascript:void(0)" onMouseDown="Calendar(' + Year + ', ' + (Month + 2) + ', ' + Day+', \''+ContainerId+'\', \''+ClassName+'\');">»</a></td></tr>';
// Week Names
HTML += '<tr class="WeekName"><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>';
HTML += '<tr class="Days">';
// Fill the previous month days with space
for(DayCounter = 0; DayCounter < WeekStart; DayCounter++)
{
HTML += '<td> </td>';
}
// Populate current month
for(DayCounter = 1; DayCounter < MonthDays; DayCounter++)
{
if((DayCounter + WeekStart) % 7 == 1) HTML += '<tr class="Days">';
if(DayCounter == Day)
HTML += '<td class="SelectedDay"><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
else HTML += '<td><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
if((DayCounter + WeekStart) % 7 == 0) HTML += '</tr>';
}
// Fill the next month days with space
for(j = (42 - (MonthDays + WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
HTML += '<td> </td>';
if((j - DayCounter) % 7 == 0) HTML += '</tr>';
}
HTML += '</table>';
Container.innerHTML = HTML;
// Returns Id of the element containing the calendar
return ContainerId;
}
function ReturnDate(Day)
{
opener.SetDate(Day, Month+1, Year);
window.close();
}
function MakeDate(iYear, iMonth, iDay, fn)
{
D = new Date();
Year = (typeof(iYear) != 'undefined') ? iYear : D.getFullYear();
Month = (typeof(iMonth) != 'undefined') ? iMonth : D.getMonth();
Day = (typeof(iDay) != 'undefined') ? iDay : D.getDate();
ReturnFunc = fn;
id = Calendar(Year, Month, Day, 'cal', 'CalendarRed');
}
//-->
</script>
</head>
