Popup Calendar 1.2 - DHTML Lab | WebReference

Popup Calendar 1.2 - DHTML Lab


Pop-up Calendar 1.2

By Peter Belesis

In the first maintenance release of our Popup Calendar, we added better navigation bar styling and the ability to clear read-only input fields. In this latest release, we include new functionality that enables you to separate form elements to display any combination of a user-selected date, month and year.

Display of user-selected date in separate form elements.

That is, you can now have separate

<input type="text">, <input type="hidden">, <textarea> or <select>

elements displaying any combination of user-selected date, month and year.


To fully appreciate the new version, you should have knowledge of previous versions of the calendar. See:

DHTML Lab Popup Calendar 1.1
DHTML Lab Popup Calendar 1.0

Browser Support

This version of the DHTML Lab Popup Calendar works only in a Windows environment in Internet Explorer, Netscape, Mozilla and Opera, in the versions listed below

internet explorer internet explorer 5.0 +
netscape 6.1 +
calendar 0.9 + ( except for 0.9.3 )
calendar 7.02 +

Future versions will include support for other platforms and browsers.

Code Discussion

We are holding back on a complete statement-by-statement discussion of the calendar code until all initial bugs and problems are fixed and we have expanded our browser support.

Live Examples

This article contains several live examples of the DHTML Lab Popup Calendar, beginning on the next page.


Many thanks to reader Larry Gioia of GioiaDesign.net who has implemented the calendar at Southwestern Chiropractic Center. He suggested we include the ability to populate separate date/month/year input elements, which his particular implementation requires.

Script Download

All the files needed for using the DHTML Lab Popup Calendar, including a sample page are included in a downloadable ZIP file:

Download:   dlcalendar1-2.zip

Let's start by demonstrating the new feature.

Send a comment or suggestion to Peter Belesis

Created: October 20, 2004
Revised: October 20, 2004

URL: http://webreference.com/dhtml/column71/