Articles | Popup Date Selector
| back
Introduction
This article demonstrates how to show a popup calendar
that you can use to select a valid date and then pass this main to the original
window. The calendar is shown in month format, and enables you to pick the year
or the month to be displayed. Not only that, but if the popup calendar is re-shown
it remembers and re-shows the previous display.
Opening Popup Windows
Opening popup windows should be fairly simple and
straightforward, however, there are bugs in the different browsers/versions that
require careful but simple consideration.
The following JavaScript code is the standard way to
open a new window at a fixed preset size:
<SCRIPT LANGUAGE="JavaScript"><!--
mywindow = window.open('cal.htm','myname',
'resizable=no,width=350,height=270');
//--></SCRIPT>
|
The following JavaScript is the cross-browser way to
open a new window at a fixed preset size:
<SCRIPT LANGUAGE="JavaScript"><!--
mywindow = window.open('cal.htm','myname','resizable=
no,width=350,height=270');
mywindow.location.href = 'cal.htm';
if (myindow.opener == null) mywindow.opener = self;
//--></SCRIPT>
|
This ensures that the cal.htm document is
loaded correctly into the new window in Netscape 2 for both the Mac and Unix,
and that for JavaScript versions that don't supply a window opener
property by default we create the property ourselves.
Referring to the Opener
The opener property allows the popup window to read or
write information to the original window. For example to obtain the value of a
variable held in the original window from the popup window we would do:
<SCRIPT LANGUAGE="JavaScript"><!--
var popupvariable = opener.originalvariable;
//--></SCRIPT>
|
To set the value of a variable held in the original
window from the popup window we would do:
<SCRIPT LANGUAGE="JavaScript"><!--
opener.originalvariable = 'abc';
//--></SCRIPT>
|
The Calendar
The Popup Date Selector is comprised of two parts. The
HTML within the original window that allows a request to display the popup
window, and the popup window that then displays the calendar and when a date is
selected passes the information back to the original window.
The code in the original window is shown below:
<HTML>
<HEAD>
<SCRIPT LANGAUGE="JavaScript"><!--
function y2k(number) { return (number < 1000)
? number + 1900 : number; }
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = y2k(today.getYear());
function padout(number) { return (number < 10)
? '0' + number : number; }
function restart() {
document.data.date.value = '' + padout(day) +
'/' + padout(month - 0 + 1) + '/' + year;
mywindow.close();
}
function newWindow() {
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">
<INPUT TYPE="button" VALUE="Show Calendar" onClick=
"newWindow()">
<INPUT TYPE="TEXT" NAME="date" VALUE="" SIZE="10">
</FORM>
</BODY>
</HTML>
|
First todays date is obtained, followed by the setting
of day, month and year variables. The y2k()
function is used to ensure that the year is in full CCYY format.
Next three functions padout(), restart()
and newWindow() are defined. More about these in a moment.
The body of the document contains a form named data.
When the Show Calendar button is pressed the newWindow()
function is invoked which opens up a new popup window containing the cal.htm
document. The form also has a text input field named date
Leaving aside the two functions padout() and restart()
we'll take a look at the contents of the cal.htm document:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="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=
"#c0c0c0" 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="#c0c0c0" 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 LANGUAGE="JavaScript"><!--
document.write(Calendar(opener.month,opener.year));
//--></SCRIPT>
</CENTER>
</BODY>
</HTML>
|
Several functions are defined: Calendar(), changeDay(),
changeMonth(), changeYear() and makeArray0(). Within
the bodu of the document a call is made to the Calendar() function
passing the values of the variables month and year held in the
opener.
The Calendar() function is an adaptation of
the Calendar() function in the article Calendars,
which displays the calendar month of the passed parameters Month and Year.
However there are a few differences, namely the introduction of a form named Cal
containing two select boxes month and year, which invoke the changeMonth()
and changeYear() functions respectively, when a change is made in the
selection. Also instead of just displaying each date within the month, the date
is wrapped up in a link that if selected invokes the changeDay()
function passing the date clicked on.
The changeMonth() and changeYear
functions reset the values of the month and year variables
within the opener by using the values of the selected options, and then
redisplay the calendar by reloading the document by setting the location
of the window to cal.htm. This has the effect of displaying the new
month or year selected.
The changeDay() also resets the value of the day
variable within the opener but this time instead of reloading the
document, it invokes the restart() function within the opener.
And, if it gets the opportunity to, the window closes itself.
If we take another look at that restart()
function:
function restart() {
document.data.date.value = '' + padout(day) + '/' +
padout(month - 0 + 1) + '/' + year;
mywindow.close();
}
|
We can see that the function updates the date
field in the data form with a formatted date using the day, month
and year variables, along with the padout() function to format
single numbers to two digits.
It also closes the popup window.
Working Example
You can try this out yourself calendar.htm
Articles | Popup Date Selector
|
back
|
