NN 6, IE 5(Win)
You want to provide a pop-up calendar to assist users in locating and entering a date into a form.
You can make the user interface part of a popup calendar date picker
by using a dynamic table inside an absolute-positioned
div container. Scripting behind the picker must
accomplish two primary tasks:
Populating the calendar with views of a selected month within a selected year
Allowing the click of a date in the calendar to be delivered back to the main document form to fill in the date field(s)
See the Discussion for an example of an HTML-based date picker, along
with style sheets and the scripts that power the calendar. One script
function, shown in Example 15-4, is called
. This function is invoked by a user
interface element inside the displayed form.
To get everything initialized, an
handler in the
body element invokes all necessary
routines in the current page as well as the DHTML API library from
onload="fillYears( ); populateTable(document.dateChooser); initDHTMLAPI( )"
This solution has a lot of code, including HTML, CSS, and scripts. But there is a lot going on here: dynamically creating table content for the calendar, setting the position and visibility of the calendar, supplying data from the calendar back to the main page, and more. Figure 15-3 shows the calendar being used with a very simple date form.
Figure 15-3. Pop-up calendar picker
We'll start with ...