Now Available!

Almost all of my javascript code has been moved over to its new home at The Javascript Toolbox. Please go there to find the latest scripts, information, etc. These pages will remain here for a while for historical purposes in case anyone needs a production copy of old code.
Calendar Popup
[Javascript Toolbox]  [Example]  [Source]
This script uses DHTML or Popup windows to display a calendar for the user to select a date. It was designed to look and behave like Microsoft Outlook.
It can be implemented in only a few lines of code, yet also provides customization options to make it work correctly in any country's display format, etc.

Note: Why are form elements or <SELECT> boxes showing over top of the DIV-style calendar popup? It's not a bug in the javascript - it's a bug/feature of browsers. See this explanation by WebReference.

Below are multiple examples of the CalendarPopup in use. Each is slightly different to show different capabilities of the script.
Click the "Show Source" links for each example to see how it was done, and hover over the "Select" links to see how they are coded. Or view the source of the entire page!

I have also provided a The Simplest Possible Implementation Of A Calendar Popup in case you're overwhelmed by this page :)

Default calendar.
Default calendar using the DIV-style display.
Default calendar using the DIV-style display, with navigation drop-downs enabled.
DIV-style calendar using a CSS prefix and different styles define in this HTML page (view source to see the defined styles)
Some dates manually disabled from selection.
Dates disabled: Anything up to today, December 25, 2007, and anything after January 1, 2008.
Week-end select.
Calendar with showYearNavigation() enabled.
Calendar with showYearNavigation() enabled and showYearNavigationInput() enabled, to allow manual entering of years
Calendar with only Saturdays allowed to be selected enabled.
German Calendar, with modified month names, day names, and week starting on Monday. Date format changed to dd/MM/yyyy
Month-select calendar
Quarter-select calendar
Year-select calendar
Default calendar, but results are split into multiple fields.
/ / (m/d/y) select
/ / (mm/dd/yyyy) select
/ select
Calendar with popup pre-selected to be January 29, 1974 (my birthday!)
Start date and end date, with end date popup defaulting to same date as start date
Start: select     End: select
Start: / select     End: / select