Related items

Popup Date Selector

You are here: irt.org | Articles | JavaScript | Window | Popup Date Selector [ previous next ]

Published on: Saturday 14th March 1998 By: Martin Webb

Introduction
Opening Popup Windows
Referring to the Opener
The Calendar
Working Example

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 reshown it remembers and reshows the previous display.

Opening Popup Windows

Opening popup windows should be fairly simple and straightforward, however, there are nasties 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="#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 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

The JavaScript Pop-up Window Primer

Dictionary Popup Utility

Feedback on 'Popup Date Selector'

Thursday July 8th, 1999 at 23:24:37 - Leslie Howard
Wednesday July 28th, 1999 at 04:47:33 - Graham Ashton
Sunday August 8th, 1999 at 13:29:48 - Adrian Cesana
Thursday March 30th, 2000 at 04:01:22 - German castro
Thursday June 29th, 2000 at 02:37:46 - chetan appannagari
Friday September 7th, 2001 at 09:33:19 - Georgia
Saturday October 27th, 2001 at 03:14:22 - Karen Puts
Thursday February 14th, 2002 at 05:04:51 - Sheetalkumar Dasarwar
Tuesday December 31st, 2002 at 15:49:57 - me
Wednesday February 5th, 2003 at 05:02:18 - Marty Mangold
Thursday April 19th, 2007 at 09:22:00 - Ravi Nakhale
Thursday July 26th, 2007 at 15:52:39 - Anatoli Teliatnikov
Wednesday March 26th, 2008 at 22:37:37 - Nightwolf