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.

下载代码说明

X关闭

支持键盘快捷键日历时间选择器

多款日历代码，支持键盘快捷键，包含 16 种语言的语言包，定制性强。