Unobtrusive JavaScript date-picker widgit

Keyboard access

Key Combination	Action
`←` `→` `↑` `↓`	Day navigation
`Ctrl` + `↑`	Next year
`Ctrl` + `↓`	Previous year
`Ctrl` + `→`	Next month
`Ctrl` + `←`	Previous month
`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

DatePicker Demos

Single Input (static) DatePicker

class=“format-d-m-y divider-dash highlight-days-12 no-fade”

Date :

Split Input (fade-in) DatePicker

class="highlight-days-67 range-low-2006-08-11 range-high-2009-09-13 disable-days-12 split-date"

/DD

/MM

YYYY

SelectList (static) DatePicker

class="highlight-days-67 disable-days-12 split-date range-low-1960-02-13 no-fade"

Note: I’ve set the lower limit of the datePicker to be (ten years) lower than the lowest possible year you can select using the year selectList in order to test the automatic resetting of the lower/higher date ranges i.e. the year selectList starts at 1970 but the className defined range has been stipulated as 1960; the datePicker should automatically reset the range to be range-low-1970-02-13.

Mixed Input (fade-in, no transparency) DatePicker

class="highlight-days-67 disable-days-12 split-date no-transparency"

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