JavascriptToolbox.com 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]
Description:
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.

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