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


Share the Post: