You are here: irt.org | FAQ | JavaScript | Date | Q379 [ previous next ]
The following is an extension of the article Popup Date Selector:
<html>
<head>
<script type="text/javascript" langauge="JavaScript"><!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
function padout(number) { return (number < 10) ? '0' + number : number; }
var today = new Date();
var day = today.getDate(), month = today.getMonth(), year = y2k(today.getYear()), whichOne = 0;
function restart() {
document.data.elements['date' + whichOne].value = '' + padout(day) + '/' + padout(month - 0 + 1) + '/' + year;
mywindow.close();
}
function newWindow(number) {
whichOne = number;
day = today.getDate(), month = today.getMonth(), year = y2k(today.getYear());
mywindow=open('cal.htm','myname','resizable=no,width=350,height=270');
mywindow.location.href = 'cal.htm';
if (mywindow.opener == null) mywindow.opener = self;
}
//--></script>
</head>
<body>
<form name="data">
<p><input type="button" value="Show Calendar" onClick="newWindow(1)"> <input type="text" name="date1" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(2)"> <input type="text" name="date2" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(3)"> <input type="text" name="date3" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(4)"> <input type="text" name="date4" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(5)"> <input type="text" name="date5" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(6)"> <input type="text" name="date6" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(7)"> <input type="text" name="date7" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(8)"> <input type="text" name="date8" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(9)"> <input type="text" name="date9" value="" size="10">
<p><input type="button" value="Show Calendar" onClick="newWindow(10)"> <input type="text" name="date10" value="" size="10">
</form>
</body>
</html>and in cal.htm:
<html>
<head>
<script type="text/javascript" langauge="JavaScript"><!--
function Calendar(Month,Year) {
var output = '';
output += '<form name="Cal"><table bgcolor="#c0c0c0" border=0><tr><td align=left width=100%>';
output += '<font color="#0000BB" face="Arial" size=+1>' + names[Month] + ' ' + Year + '<\/font><\/td><td width=50% align=right>';
output += '<select name="Month" onChange="changeMonth();">';
for (month=0; month<12; month++) {
if (month == Month) output += '<option value="' + month + '" selected>' + names[month] + '<\/option>';
else output += '<option value="' + month + '">' + names[month] + '<\/option>';
}
output += '<\/select><select name="Year" onChange="changeYear();">';
for (year=1900; year<2101; year++) {
if (year == Year) output += '<option value="' + year + '" selected>' + year + '<\/option>';
else output += '<option value="' + year + '">' + year + '<\/option>';
}
output += '<\/select><\/td><\/tr><tr><td align=center colspan=2>';
firstDay = new Date(Year,Month,1);
startDay = firstDay.getDay();
if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0))
days[1] = 29;
else
days[1] = 28;
output += '<table callspacing=0 cellpadding=0 border=1 bordercolordark="#FFFFFF" bordercolorlight="#C0C0C0"><tr>';
for (i=0; i<7; i++)
output += '<td width=50 align=center valign=middle><font size=-1 color="#000000" face="Arial"><b>' + dow[i] +'<\/b><\/font><\/td>';
output += '<\/tr><tr align=center valign=middle>';
var column = 0;
var lastMonth = Month - 1;
if (lastMonth == -1) lastMonth = 11;
for (i=0; i<startDay; i++, column++)
output += '<td width=50 height=30><font size=-1 color="#808080" face="Arial">' + (days[lastMonth]-startDay+i+1) + '<\/font><\/td>';
for (i=1; i<=days[Month]; i++, column++) {
output += '<td width=50 height=30>' + '<a href="javascript:changeDay(' + i + ')"><font size=-1 face="arial" color="#0000FF">' + i + '<\/font><\/a>' +'<\/td>';
if (column == 6) {
output += '<\/tr><tr align=center valign=middle>';
column = -1;
}
}
if (column > 0) {
for (i=1; column<7; i++, column++)
output += '<td width=50 height=30><font size=-1 color="#808080" face="Arial">' + i + '<\/font><\/td>';
}
output += '<\/tr><\/table><\/form><\/td><\/tr><\/table>';
return output;
}
function changeDay(day) {
opener.day = day + '';
opener.restart();
self.close;
}
function changeMonth() {
opener.month = document.Cal.Month.options[document.Cal.Month.selectedIndex].value + '';
location.href = 'cal.htm';
}
function changeYear() {
opener.year = document.Cal.Year.options[document.Cal.Year.selectedIndex].value + '';
location.href = "cal.htm";
}
function makeArray0() {
for (i = 0; i<makeArray0.arguments.length; i++)
this[i] = makeArray0.arguments[i];
}
var names = new makeArray0('January','February','March','April','May','June','July','August','September','October','November','December');
var days = new makeArray0(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dow = new makeArray0('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
//--></script>
</head>
<body bgcolor="#C0C0C0" topmargin=2 leftmargin=5>
<p><center>
<script type="text/javascript" language="JavaScript"><!--
document.write(Calendar(opener.month,opener.year));
//--></script>
</center>
</body>
</html>