Previous : Main
Matt Kruse's Javascript Toolbox - Calendar Popup Examples
Credit:
Original source from https://www.mattkruse.com/ but now no longer available. We maintain it now, and shown here so we can debug our code.

Description:
This script uses html or Popup windows to display a calendar for the user to select a date. 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.

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!

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, and anything after January 1.
select
Week-end select. ie selects the weekend date when selected.
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.
/ / (d/m/y) select
/ / (dd/mm/yyyy) select
/ select
Calendar with popup pre-selected to be January 1, 1983, when ARPANET adopted TCP/IP.
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