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”

March 1970
«Today»
MTWTFSS
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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.

December 1990
«Today»
MTWTFSS
     12
3456789
10111213141516
17181920212223
24252627282930
31      
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.