Dates and Calendars - Calendar Date Picker

for Win/IE5.5+, Netscape 6+, Mozilla 1.1+, Firefox, Opera 7+

This is a highly configurable date picker that allows you to specify date ranges and formats.
function showCal() takes 6 arguments:
showCal(month,year,formField,dateSpan,weekends,dateFormat)

<form name="myDate">
Enter a Date (MM/DD/YY): <input type="text" name="DATE1">
<img src="images/calendar.gif" onclick="showCal('','',document.forms['myDate'].DATE1,5,true,2)">

Enter a Date (DD/MM/YY): <input type="text" name="DATE2">
<img src="images/calendar.gif" onclick="showCal('1','2001',document.forms['myDate'].DATE2,4,false,6)">

</form>

Month is a number between 0 and 11, with 0 = January and 11 = December.

Year is a 4 digit number

If you leave the month and year empty it will default to the current month and year.

formField is the field the date will be entered into.

dateSpan is a number representing which dates should be clickable. It does not include weekends.
0 = no dates
1 = all past dates up to and including today
2 = all future dates starting with today
3 = all future dates NOT including today
4 = all past dates NOT including today
5 = all dates

weekends is a true/false boolean that indicates if weekend dates should be clickable. Produces no effect when dateSpan = 0;

dateFormat corresponds to the formats defined in function dateFormats().
0 = mmddyy
1 = mmddyyyy
2 = mm/dd/yyyy
3 = mm/dd/yy
4 = yyyymm
5 = ddmmyy
6 = dd/mm/yy
7 = ddmmyyyy
8 = dd/mm/yyyy

It seems like overkill doesn't it?. But I wrote it for a site that uses a wide variety of date formats and ranges and I didn't want to have a different calendar script for each format.

You can combine this with the date validating and formatting scripts

<style>
#calNavPY, #calNavPM {border:1px #999 solid}
/* #calNavMY {} */
#calNavNM, #calNavNY { border:1px #999 solid}
#calNav td, #calNav td a { text-align:center;font-family:arial;font-size:12px;font-weight:bold;background-color:#eaeaea;text-decoration:none }
#calNav td a,#calNav td a:visited,#calTbl td a,#calTbl td a:visited {color:#00c }
#calNav td a:hover,#calTbl td a:hover { color:#69c}
#calNav {margin-bottom:5px;width:100%}
#calTbl {width:100%}
#calTbl td {text-align:center;font-family:arial;font-size:11px;border:1px #ccc solid}
#calTbl thead td {
	font-weight:bold;
	background-color:#eaeaea;
	padding: 2px;
	 border:1px #ccc solid
	 height: auto;
	 }
#calDiv {
	border:1px ridge;
	padding:2px;
	width:200px;
	position:absolute;
	z-index:276;
	top:110px;
	left:300px;
	background-color:#fff
}
#calTopBar {
	background-color:#7E7EFF;
	color:#fff;
	padding:2px;
	text-align:right;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
	width:100%
}
#calClose {
padding:0px 2px;border:1px #fff solid;cursor:pointer;cursor:hand
}
#calPic {cursor:hand}
</style>
<div id="calDiv" style="display:none">
<div id="calTopBar">CLOSE <span onclick="document.getElementById('calDiv').style.display='none';" id="calClose">X</span></div>
<table width="100%" id="calNav">
<tr><td id="calNavPY"></td><td id="calNavPM"></td><td id="calNavMY" width="100"></td><td id="calNavNM"></td><td id="calNavNY"></td></tr>
</table>
<table  id="calTbl" width="100%" cellspacing="0">
<thead><tr style="background-color:#eaeaea"><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr></thead>
<tbody></tbody>
</table>
</div>
<script>
/* ^^^^^^  BASIC DATE  STARTER-SET ^^^^^^ */
/* Today's date */
var date = new Date();
var curr_dy = date.getDate(); 
var curr_mn = date.getMonth();
var curr_yr = date.getFullYear();
var DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var moty = ["January","February","March","April","May","June","July","August","September","October","November","December"];

function Calendar_get_daysofmonth(monthNo, p_year) {
	if ((p_year % 4) == 0) {
		if ((p_year % 100) == 0 && (p_year % 400) != 0)
			return DOMonth[monthNo];
		return lDOMonth[monthNo];
	} else
		return DOMonth[monthNo];
}
// -- globals used with calendar and date functions
var calField; var calSpan; var calFormat; var calWknd = false;
/* ^^^^^^ end BASIC DATE  STARTER-SET ^^^^^^ */
function getNextMonth(m,y,incr){
	var ret_arr = new Array();
	ret_arr[0] = m + incr; ret_arr[1] = y;
	if (ret_arr[0] == 12){ ret_arr[0]=0; ret_arr[1]=ret_arr[1]+1; }
	if (ret_arr[0] == -1){ ret_arr[0]=11; ret_arr[1]=ret_arr[1]-1; }
	return ret_arr;
}
function figureDOTW(m,d,y){
	var tDate = new Date(); tDate.setDate(d); tDate.setMonth(m); tDate.setFullYear(y); return tDate.getDay();
}
function scramKids(n){ // this is a basic removeChild loop for removing all childNodes from node n
	var numKids = n.childNodes.length;
	for (i=0;i<numKids;i++) { n.removeChild(n.childNodes[0]); }
}		
function buildCalendar(m,y){
// -- requires: Basic Date Starter-Set, getNextMonth(), figureDOTW(), scramKids()
	m = parseFloat(m); y = parseFloat(y); 
	var dayNo = figureDOTW(m,1,y);
	var monthNo = Calendar_get_daysofmonth(m,y);
	var rowNum = Math.ceil((monthNo+dayNo)/7);
	var dayCount = 1;
	var calTB = document.getElementById('calTbl').getElementsByTagName('tbody')[0];
	var calNav = document.getElementById('calNav');
	scramKids(calTB);
	for (i=0;i<6;i++){ // row loop
		var calTR = document.createElement('tr');
		var calTDtext;
		var cellContent;
		for (j=0; j < 7; j++){ // cells in row loop, days in the week
			var calTD = document.createElement('td');
			if (j == 0 || j == 6 ) // weekends
				calTD.style.backgroundColor = '#EDF0FF';
			if ((i==0 && j < dayNo) || dayCount > monthNo) // cells before the first of the month or after the last day
				cellContent = document.createElement('br');
			else  {
				var dyA = document.createElement('a');
				dyA.setAttribute('href','javascript:placeDate('+m+','+dayCount+','+y+')');
				
				calTDtext = document.createTextNode(dayCount.toString());
				cellContent = calTDtext;
				if (dayCount == curr_dy && m == curr_mn && y == curr_yr)
						calTD.style.backgroundColor = '#fc0';
				if ((j!=0 && j!=6) || calWknd == true){ // if the day is a weekday or weekends allowed
					if (dayCount == curr_dy && m == curr_mn && y == curr_yr && calSpan != 3 && calSpan != 0 && calSpan != 4){
						dyA.appendChild(calTDtext); cellContent = dyA;
					}
					if (calSpan == 1 || calSpan == 4){
						if (y < curr_yr || (m < curr_mn && y == curr_yr) || (m == curr_mn && y == curr_yr && dayCount < curr_dy))
							{
							dyA.appendChild(calTDtext); cellContent = dyA;
							}
					} 
					if (calSpan == 2 || calSpan == 3){
						if (y > curr_yr || (m > curr_mn && y == curr_yr) || (m == curr_mn && y == curr_yr && dayCount > curr_dy))
							{dyA.appendChild(calTDtext); cellContent = dyA;}
					}
					if (calSpan == 5){
						dyA.appendChild(calTDtext); cellContent = dyA;
					}
				}
				else { /* else if it's a weekend */ }
				dayCount++;
			}
			calTD.appendChild(cellContent);
			calTD.setAttribute('width','14%');
			calTR.appendChild(calTD);
		}
		calTB.appendChild(calTR);
	}
	var nMonth = getNextMonth(m,y,+1);
	var pMonth = getNextMonth(m,y,-1);
	document.getElementById('calNavPY').innerHTML = '<a href="javascript:void(0)" onclick="buildCalendar('+m+','+(y-1)+')"><<</a>';
	document.getElementById('calNavPM').innerHTML = '<a href="javascript:void(0)" onclick="buildCalendar('+pMonth[0]+','+pMonth[1]+')"><</a>';
	document.getElementById('calNavMY').innerHTML = moty[m] +' '+y;
	document.getElementById('calNavNY').innerHTML = '<a href="javascript:void(0)" onclick="buildCalendar('+m+','+(y+1)+')">>></a>';
	document.getElementById('calNavNM').innerHTML = '<a href="javascript:void(0)" onclick="buildCalendar('+nMonth[0]+','+nMonth[1]+')">></a>';
}
function showCal(m,y,f,dateSpan,wknd,format){
	/* 
	dateSpan - date that should have links; does not include weekends
	0 = no dates
	1 = all past dates up to and including today
	2 = all future dates starting with today
	3 = all future dates NOT including today ( for GTC Dates )
	4 = all past dates NOT including today ( for start / from dates )
	5 = all dates
	*/
	calField = f; calSpan = dateSpan; calFormat = format; calWknd = wknd;
	if (m == '' && y == ''){m = curr_mn; y = curr_yr;}
	buildCalendar(m,y);
	document.getElementById('calDiv').style.display = '';
}
function placeDate(m,d,y){ 
	eval(calField).value = dateFormats(m,d,y,calFormat);
	document.getElementById('calDiv').style.display = 'none';
}
function dateFormats(m,d,y,calFormat){
	d = d.toString();
	m = m+1; m = m.toString();
	y = y.toString(); 
	var sy = y;
// -- convert to 2 digit numbers
	if (m.length == 1){m = '0'+ m;}
	if (d.length == 1){d = '0'+ d;}
	if (y.length == 4)
	 sy = y.substring(2,4);
	var format;
	switch (calFormat){
		case 0 : format = m + d + sy; break; 			//  mmddyy
		case 1 : format = m + d + y; break; 			//  mmddyyyy
		case 2 : format = m +'/'+ d +'/'+ y; break; 	//  mm/dd/yyyy
		case 3 : format = m +'/'+ d +'/'+ sy; break; 	//  mm/dd/yy
		case 4 : format = y + m; break; 				//  yyyymm
		case 5 : format = d + m + sy; break;			//  ddmmyy
		case 6 : format = d +'/'+ m +'/'+ sy; break; 	//  dd/mm/yy
		case 7 : format = d + m + y; break;				//  ddmmyyyy
		case 8 : format = d +'/'+ m +'/'+ y; break; 	//  dd/mm/yyyy
		default: format = m + d + y; break; 			//  mmddyyyy
	}
	return format;
}
</script>
<form>
Enter a Date: <input type="text" name="START_DATE"> 
<img src="images\calendar.gif" onclick="showCal('','',document.forms[0].START_DATE,5,true,3)" style="cursor:pointer;cursor:hand"> ( MM/DD/YY )
</form>

PXL8 2004