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”

Split Input (fade-in) DatePicker

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

/ /
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.