n last month’s article I showed you how to create a calendar page in ASP with pop-up functionality. In this month’s article, I’ll show you how to make your pop-up functional with an application by filling in user-entered date fields on a form.

Collecting dates on Web pages using HTML forms has always been fraught with problems. Users do not always enter dates in the format you need requiring additional validation code on the server. Forcing users to pick from list of Year/Month/Dates makes the user interface cumbersome.



Simplify the user experience. Allow users to pick dates using a Calendar metaphor, simply by clicking and selecting the date of choice. Ensure accurate date data entry each time.

There are two pages in operation: the original HTML (or ASP) page that displays the date text field (DateEntry.htm) and an ASP page (calpop.asp) that displays the calendar. You can obtain a copy of the two files here. The next step is to hook up the two pages.

If you are familiar with JavaScript, you know that the window object (browser) has an “open” method that invokes a pop-up window. The method has the following syntax:

oNewWindow = window.open( [sURL] [, sName][, sFeatures] [, bReplace])

Method	Description
ONewWindow	A variable that holds the reference to the pop-up window
sURL	A string that specifies the URL for the pop-up window
sName	A string that specifies the name for the pop-up window, for use in script
sFeatures	A string that specifies the look and size of the pop-up window
bReplace	A boolean value that specifies whether the pop-up window occupies a place in the browser’s history or not.

Set Your JavaScript in Motion
The URL we wish to open is the name of our calendar pop-up ASP page along with any querystring values we wish to pass. The features of the window will decide its size and appearance. A good size is 220 by 220 pixels. The following code opens the calendar pop-up window:

window.open('calpop.asp', 'ncal', 'width=220, height=220');

Note that the variable “ncal” is just one way of referencing the calendar pop-up window. You can specify any valid name for the window.

The next step is to place the above code within a block of JavaScript, preferably in the section and invoke it from the click event of the graphical calendar image. This is the JavaScript code block:

To invoke it from the click event of the calendar image, enclose the image within a hyperlink as follows, calling the JavaScript function “showCalendar”.

Now I need to modify the hyperlink for each day so that it updates the text box in the parent window on which there are four separate date fields. How does the pop-up calendar know which date field to update? Use a new variable, “tbm” (text box to modify), to pass the name of the form as well as the name of the corresponding text box within the form . Assuming that the form name is “frmEntry” and the date text box is called “pebd” (Project Estimated Begin Date), you can modify your JavaScript as follows:

window.open("calpop.asp?tbm=frmEntry.pebd","ncal","width=220, height=220");

This code tells the calendar pop-up to update the correct date field.However, my example application has four different date fields with four images that bring up the same calendar pop-up. Therefore, I need to modify the showCalendar routine to branch off and send four different field names, depending on which image was clicked. Call the showCalendar routine from each of the four images and pass a unique integer (from one to four) for each. You can switch the field name within the JavaScript based on the argument passed in.

The HTML code for the entire form follows (note the form name, the text box field names, as well as the arguments passed by the click event of the image hyperlinks):

   
      Project   
   
      Begin Date   
   
 
   
      End Date   
   
      Estimated:   
   
                
   
 
   
                
   
      Actuals:   
   
                
   
 
   
                

The modified JavaScript routine will now accept a single argument, and based on the argument, pass different field names to calpop.asp.

Getting the Date Straight
We need to account for the new information being passed to us in calpop.asp, as well as update the hyperlink on each calendar day so it will update the correct text field.

To do this, use ASP to write some dynamic JavaScript. For instance, if you want to update the text box field “pebd” contained within the form “frmEntry” of the parent window to a value equal to 12/28/2000; you would use the following code:

opener.frmEntry.pebd.value = '12/28/2000';

This causes the text box field in the parent?referred to as the “opener” within the child document?to be updated to the specified value. In this case, the field name is a variable in the Request object, the day is the hyperlink clicked on, while the month and the year are calculated within the ASP page prior to rendering a calendar.

The current code to display a hyperlink for the day is as follows:

Sub WriteActiveCalDay(byval sLabel)   Response.Write    "   " & sLabel & "" & vbCrLfEnd Sub

When executed, this produces the following HTML code for the first day of the month:

1

To get the hyperlink for a given day to call a JavaScript function instead of the current “BLAH”, change the code as follows:

Sub WriteActiveCalDay(byval sLabel)   Response.Write    "   " & sLabel & "   " & vbCrLfEnd Sub

When executed, this produces the following HTML (for the first day of the month):

1

The hyperlink for each day passes in its unique data value by invoking the same JavaScript routine, “SetDateValue.”

The following JavaScript code-preferably in the section– within calpop.asp defines the SetDateValue routine:

I now need to update the parent’s date text field value within the function. Remember, the field name is updated via the Request Object and the current month and year is displayed via the ASP variables intM and intY. :

function SetDateValue(d) {opener.<%=Request("tbm")%>.value = '<%=intM %>/'+d+'/<%=intY %>';}

When this code executes, the ASP script completes the JavaScript pieces. The output in this example is December 2000:

function SetDateValue(d) {opener.frmEntry.pebd.value = '12/'+d+'/2000';}

The text “frmEntry.pebd in our client-side JavaScript is filled in via ASP with the correct value for the request “tbm.” Similarly, ASP is responsible for filling in the 12 and the 2000, the values for intM and intY, respectively. Our example application is essentially finished. I can execute the page and invoke the pop-up calendar, click on any day, and find the proper date value input into the parent date text field.

There is one last “cleanup” function to take care of. The calendar pop-up needs to close down automatically after the user clicks on the date. This is easily accomplished using the “close” method of the window object ?in this case, the “self” object?in JavaScript:

self.close();

To make the calpop.asp page work in all the months, instead of just the currently selected month, I need to pass the variable “tbm.” I also need to program the “today” button to set the current date in the text box field. These tasks are done by modifying the hyperlinks for the previous and next image buttons and adding a new “SetTodayValue” function to the code:

Change the lines in the routine “WriteMonthNameTable” from:

?m=<%= intMPrev %>&y=<%= intYPrev %>"><%= MonthName(intM)  & ", " & intY %>?m=<%= intMNext %>&y=<%= intYNext %>">

To the following (notice the new ?tbm=.. value):

?tbm=<%= Request("tbm") %>&m=<%= intMPrev %>&y=<%= intYPrev %>"><%= MonthName(intM)  & ", " & intY %>?tbm=<%= Request("tbm") %>&m=<%= intMNext %>&y=<%= intYNext %>">

And change the code in the routine WriteCalTableEnd from:

To the following (notice the call to the new JavaScript function):

Finally, create a new JavaScript routine:

This sets the new function SetTodayValue with the current date using the VBScript Month, Day, and Year functions.

Eliminate Workarounds
The whole point of the two solutions in this series is to provide an alternative to manual data entry for date forms. Once you’ve built that functionality, it makes sense to force the use of the calpop window by locking out manual date entry in the parent form. The easiest way to do this is to set the text field as READONLY.

The user cannot manually change the value of the text box but the JavaScript code can change it via script. The READONLY technique is defined in HTML 4.0 and above and may not work in older browsers.

You now have a complete working application that ensures valid data entry for calendar dates and a great visual interface for your users.

You can view the entire application for this month’s article as well as get your hands on the complete source code here.