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