Unobtrusive JavaScript datePicker demo ~ frequency decoder

Unobtrusive JavaScript datepicker widgit

Keyboard Controls

`←` `→` `↑` `↓`	Day navigation
`Page Up`	Previous month
`Page Down`	Next month
`Ctrl` + `page up`	Previous year
`Ctrl` + `page down`	Next year
`Space`	Today’s date
`Esc`	Close datepicker (without selecting date)
`Return`	Select highlighted date and close datepicker
`2`–`7`	Select the corresponding day as the first day of the week

Demo #1

A bare-bones datepicker that uses a single text input to represent the day, month and year date parts

Date

Demo #2

Displaying the week number within the datePicker interface
Setting a statusbar date format
Disabling various dates and then re-enabling some of them - to show you how the order of the disable/enable calls are important. Dates are disabled/enabled in the following order:
1. Disable March the 13^th for all years
2. Disable the 25^th to the 31^st for all months and all years
3. Disable July 01^st to July 08^th for all years
4. Disable today’s date
5. Enable the 03^th to the 05^th of July for all years
6. Enable the 25^th December for all years

Date

Demo #3

Using three text inputs to represent the individual day, month and year date parts
Removing the “today” button from the U.I.
Disabling the 25^th of December for all years
Filling the entire grid with dates
Enabling the selection of all dates rendered within the grid

/ /

Demo #4

Using three select lists to represent the day, month and year date parts
Disabling Monday and Tuesday
Using a callback function to display a long-hand date format beside the form elements

Note: the high & low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there’s no need to set a rangeLow or rangeHigh when creating the datepicker.

Demo #5

Using both text inputs and select lists to represent the day, month and year date parts
Positioning the button within a specified DOM node (which is why it’s rendered to the left of the associated form controls)
Highlighting Monday only

Demo #6

Using a select list to represent both the month and year date parts

Demo #7

Using a select list to represent the day, month and year date parts (let’s be honest - you probably wouldn’t ever do this but the code makes allowances for it and so might as well be demoed)
Testing the enable and disable methods

Demo #8

Setting bespoke statusbar titles for Christmas day, new years eve and new years day
Setting a callback function for the “redraw” event that dynamically calculates and disables Easter Monday for the given year and sets a bespoke title that reads “Easter Monday” for the date in question

Date

Demo #9

Creating a static (inline) datepicker
Setting the opacity to 90%

Date

Demo #10

Creating a static (inline) datepicker
Filling the entire grid with dates
Enabling the selection of all dates rendered within the grid
Testing the enable and disable methods

Date

Demo #11

Removing the associated input from the U.I.