Home » Simplifying Date Data Entry, Part III

Simplifying Date Data Entry, Part III

f you have been following this series of articles, you know the problems with date data entry and the proposed a pop-up calendar solution that allows a user to pick and select dates instead of typing (or mistyping) a date. In last month’s article, I showed you how to create a calendar page in ASP to use with a pop-up functionality to simplify date data entry on your ASP pages. In this article, I’ll go one step further in usability?instead of having to navigate to a separate pop-up window to pick the date, with some creative DHTML, the date will be selected within the same browser window by using a drop-down calendar control metaphor. The calendar will appear when needed and disappear when done within the same browser window. See Figure 1.

The actual code for generating a calendar and displaying it does not change from last month’s solution. We still have a calendar ASP page (we called it calpop.asp in previous articles, we’ll now just rename it as dropcal.asp?since it acts as a drop down calendar control). What differs is the technique we use to display the calendar within the same browser window. Separating content within the same browser window so that they are independent of each other requires you to use frames of some kind. The standard HTML frames do not allow the frame to jump around the page, which is exactly what we want to accomplish, especially if we have multiple date data entry text boxes. Therefore we will use DHTML LAYERS or DIVISION (DIV) to create a floating frame.

Note: Given Netscape’s lack of support for layers in the latest (and possibly future) versions, this solution is strictly for Internet Explorer only. You can always use conditional code to direct your users to last month’s solution for Netscape browsers and use this drop down calendar solution for IE browsers.

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.

Understanding the DHTML Foundation
HTML has two special tags that are normally not used for plain HTML: the and

Division tags. When Dynamic HTML was introduced, these two tags suddenly rose into prominence as useful “container” tags within which dynamic content could be manipulated. Both the SPAN and the DIV tags define a container area, the DIV tag defines a stand alone rectangle, while the SPAN tag defines a container that can be viewed as made up of many rectangles joined together to form a larger area.

To define a DIV tag, use the following code:

some text

The ID attribute allows you to access the rectangle container by name in your script code. The DIV tag also corresponds to Netscape’s LAYER tag so you can use it to write cross-browser DHTML. The DIV Tag produces a rectangle on screen. The best way to learn about DHTML is to actually try out the code and see what happens. Since we will be doing some fancy positioning in our page, let’s test out with a dummy page before we place the code in our real page.

If you have a copy of the 10MinDateEntry.htm file from our last months’ article, open it and save it with a new name for our testing.

At the bottom of the page, add a DIV tag to hold our calendar. To make it visible as a distinct rectangle during our testing, use the STYLE attribute to make it yellow in color. Add the following code to the bottom of the page, just before the tag:

Some text here

You should be able to see the DIV tag as a long skinny rectangle that occupies one line of text at the bottom of the page. You can modify the size of the rectangle by adding values to the STYLE attribute. Since we will be positioning this DIV tag later on at different locations on the page, let us also set its position attribute:

Some text here

Now you get a rectangle that is about the size and shape of the calendar. Notice that we set the width and the height of the rectangle (DIV), but did not set its left or top property values.

The next task is to populate the inside of the DIV tag with the calendar, which is on a separate ASP page. This requires an inline frame that refers to an external file on your Web server. Fortunately, IE supports an inline frame HTML tag called IFRAME and makes it simple to use:

<%
%>

As you can see, we have an IFRAME tag pointing to the calendar page (last month article’s calpop.asp now renamed as calpopd.asp); within our DIV tag.

The last trick is to make the rectangle “disappear” and only “appear” when we click on the date drop down graphic. To make the calendar invisible, adjust the STYLE attribute of the DIV enclosing the calendar:

By adding the “display:one” attribute value renders the DIV tag, therefore the calendar invisible.

Making the Calendar Appear on Demand
Now let’s make the calendar magically appear on demand. We want this to happen when the user clicks on the graphic that represents the drop-down calendar. Before you can make the calendar appear, you need to position the calendar DIV rectangle just underneath the drop-down graphic. The first step is to encase the drop-down graphic within a small rectangle created by using SPAN tags. Make sure the SPAN tag has an absolute positioning by specifying it within its STYLE.

We therefore modify the code that reads:

To:

Notice the difference: We surrounded the hyperlink with a SPAN tag, set the positioning of the SPAN tag to absolute without specifying any other parameters, and gave the SPAN a name (reflecting the text box name it is next to) so that we can access it from our script code. Finally, change the JavaScript code called when the hyperlink is clicked from “showCalendar(1)” to “DropCalendar(1)” (which we will write later on). Specifying the positioning of the SPAN tag to absolute allows you to access its dimensions and locations to position the calendar DIV underneath it. To specify that the span is actually clickable, add the attribute “cursor:hand” to the STYLE for the SPAN. Repeat the process for all four drop-down calendar graphics with each SPAN ID reflecting the name of the text box next to it.

Note: Since the SPAN tags are positioned “absolutely”, you need to rework some of the HTML for the form to display all the controls properly.

The next step is to write the code for the DropCalendar routine. The DropCalendar routine has to perform the following actions:

Move the calendar to the correct position on screen
Populate it with the correct calendar (and “text box to modify” information)
Make it visible

Use the following code for DropCalendar:

function DropCalendar(i) {	// declare variable	var tbm;	var theSpan	var SpanBox, CalBox, CalFrame;	// assign field name to variable 	// based on argument	if(i==1) {		tbm='frmEntry.pebd';		theSpan = 'spanPEBD';	}	if(i==2) {		tbm='frmEntry.peed';		theSpan = 'spanPEED';	}	if(i==3) {		tbm='frmEntry.pabd';		theSpan = 'spanPABD';	}	if(i==4) {		tbm='frmEntry.paed';		theSpan = 'spanPAED';	}		SpanBox = document.all[theSpan];		CalBox = document.all['popCal'];		CalFrame = document.all['CalFrame'];		// Position			CalBox.style.left = SpanBox.offsetLeft;		CalBox.style.top = SpanBox.offsetTop 		+ SpanBox.offsetHeight + 2;		// Update the Source within it		CalFrame.src = 'calpopd.asp?tbm='+tbm;		// Make it visible		CalBox.style.display='';}

As you can see, the first thing to do is to declare some variables:

// declare variablevar tbm;var theSpanvar SpanBox, CalBox, CalFrame;

Populating the Calendar
We now need to figure out the name of the modified text box (or tbm variable used by the calendar ASP page) as well as the name of the SPAN tag under which we need to position the calendar DIV tag. Because there are four separate drop-down calendar triggers on the page all using the same single drop-down calendar, we need a way to know which date text box invoked the calendar. We do this by passing an argument to the “DropCalendar” function when the appropriate graphic is clicked. Use this code to set some values to the variables based on the argument passed in:

// assign field name to variable // based on argumentif(i==1) {	tbm='frmEntry.pebd';	theSpan = 'spanPEBD';}if(i==2) {	tbm='frmEntry.peed';	theSpan = 'spanPEED';}if(i==3) {	tbm='frmEntry.pabd';	theSpan = 'spanPABD';}if(i==4) {	tbm='frmEntry.paed';	theSpan = 'spanPAED';}

Now assign values to some more variables to ease its use within the code:

SpanBox = document.all[theSpan];CalBox = document.all['popCal'];CalFrame = document.all['CalFrame'];

Finally, position the Calendar DIV tag (the object within the CalBox variable) so that it uses the same “left” position as the SPAN tag (the object within the SpanBox variable) positioned just below it:

// Position	CalBox.style.left = SpanBox.offsetLeft;CalBox.style.top = SpanBox.offsetTop + SpanBox.offsetHeight + 2;

Now populate the source for the calendar within the Calendar DIV tag. Remember, the calendar ASP page requires you to provide the correct text-box-to-modify argument as a Querystring value. Use this code:

// Update the Source within itCalFrame.src = 'calpopd.asp?tbm='+tbm;

And our pièce de résistance, making the calendar control visible:

// Make it visibleCalBox.style.display='';

The calendar control appears like magic when the user clicks on one of the drop-down calendar graphics.

I urge you to download the complete source code for this month’s article and experiment with it.

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.