Browse DevX
Sign up for e-mail newsletters from DevX


Simplifying Date Data Entry, Part III

Learn how to create a visual calendar metaphor without popups. With some creative DHTML, the date can be selected within the same browser window by using a drop-down calendar control metaphor.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date