Unobtrusive JavaScript date-picker widgit v5

Keyboard access

Key Combination Action
Day navigation
page up Previous month
page down Next month
Ctrl + page up Previous year
Ctrl + page down Next year
Space Todays date
Esc Close date-picker (no date selected)
Return Select highlighted date and close date-picker
2 - 7 Select the corresponding day as the first day of the week

Various DatePicker Demos

Single Input DatePickers

A simple datePicker using a dd/mm/yyyy date format and whose associated input value is set to "13/03/2009".

:

Now let’s show some week numbers and change the date format slightly in order to display two figure years.

:

Add a status bar and change the date format to use a four figure year and dashes as the date dividor.

:

Let’s highlight Monday & Tuesday.

:

Let’s set a top range of one year from today and a bottom range of 35 days before todays date.

:

Let’s fill the entire grid with selectable dates.

:

Let’s fill the entire grid again but we’ll disable the selection of the extra dates.

:

Let’s set a bespoke final opacity of 80%.

:

Let’s now disable the fade in/out animation and the selection of Saturday & Sunday.

:

Let’s now disable some specific dates using wildcards (the 1st to the 22nd of this month and the 25th of December for all years).

:

Now we’ll set a more complicated dateformat (which you probably wouldn’t use in a real life situation but it will at least test the script’s ability to parse complicated dates) and enable only the 1st to the 18th and 26th to the 28thof this month and the 10th to the 20th of next month. We’ll also set a wildcard enabled date that enables the 2nd day of all months for all years ("******02").

:

Split Input DatePickers

Demo 12: Using three text inputs and removing the today button from the U.I.

/ /

Demo 13: Using three text inputs & positioning the button within a wrapper span.

/ /

Demo 14: Using 3 selectLists and disabling Monday and Tuesday. Note: the high & low ranges will be automatically calculated by the script when selectLists are used to represent the year so there’s no need to set the rangeLow and rangeHigh variables.

Demo 15: Using a mixture of text input and selectLists.

Demo 16: Using a selectList to represent both month and year date parts. Again, you shouldn’t have to set the ranges as they are calculated for you whenever selectLists are used to represent the year.

Inline DatePickers
:

OK, the same datepicker as above but now let’s show some week numbers, add a status bar and set a top and bottom range (the 1st of last month to the 10th of next month).

:
Disable/enable demos

Testing to see if the activation button has been automatically disabled (as the associated form element is disabled):

:

Testing to see how an inline/static datePicker reacts to dynamic disabling/enabling:

:

Testing to see how a popup datePicker reacts to dynamic disabling/enabling:

:

Callback function demos

A simple datePicker with a callback function disableEasterMonday defined for the “redraw” event, that dynamicaly calculates Easter Monday for the given year and disables that date in question.

:

A simple datePicker with a callback function showEnglishDate defined for the “dateset” event that uses the datePickerController.parseDate method to return a more natural English language date, which is then rewritten under the associated input.

:

View the related “language in the lab” post for this demo.