O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a Calendar Date Picker

NN 6, IE 5(Win)

Problem

You want to provide a pop-up calendar to assist users in locating and entering a date into a form.

Solution

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 showCalendar( ) . This function is invoked by a user interface element inside the displayed form.

To get everything initialized, an onload event handler in the body element invokes all necessary routines in the current page as well as the DHTML API library from Recipe 13.3:

onload="fillYears( ); populateTable(document.dateChooser); initDHTMLAPI( )"

Discussion

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required