Unobtrusive JavaScript date-picker widgit v4

Keyboard access

Note: All keyboard shortcuts are from the The DHTML Style Guide Working Group (DSGWG) recommendations.

Key Combination Action
Day navigation
page up Previous month
page down Next month
Ctrl + page up Previous year
Ctrl + page down Next year
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 DatePickers

A simple datePicker (don’t be scared of the dateformat class, it’s easier to create than you think) :



OK, the same datepicker as above but now let’s show some week numbers and change the date format slightly in order to display two figure years:

class=“dateformat-d-sl-m-sl-y show-weeks


Add a status bar and change the date format to use a four figure year and dashes as the date dividor:

class=“show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y


Let’s highlight Monday & Tuesday:

class=“show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-12


Now we’ll remove the day highlight set previously, set a top & bottom date range and change the date format to use forward slashes as the date dividor:

class=“show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y dateformat-d-sl-m-sl-Y range-low-5-week range-high-1-year


Let’s disable the drag & drop functionality:

class=“dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-drag


Let’s fill the entire grid with selectable dates:

class=“dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y fill-grid


Let’s fill the entire grid again but we’ll disable the selection of the extra dates:

class=“w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y fill-grid-no-select


Let’s set a bespoke final opacity of 80%:

class=“w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y opacity-80


Let’s now disable the fade in/out animation:

class=“w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y no-animation


Just for fun, let’s now disable some specific dates using wildcards and a date range:

class=“w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222


Now we’ll enable a few of the dates we’ve just disabled (enabled dates take preference over disabled dates):

class=“w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222 enable-20070205-20070209

Now we’ll set a more complicated dateformat (which you probably wouldn’t use in a real life situation but it will at least test the script’s ability to parse complicated dates):

class=“dateformat-l-cc-sp-d-sp-F-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y”


Split Input DatePickers

Using three text inputs and disabling the today button:

class="split-date fill-grid statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks no-today-button"

/ /

Using three text inputs & positioning the button within a wrapper span:

class="split-date statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks button-butt-wrapper"

/ /

Using 3 selectLists, disabling Monday and Tuesaday and setting a low range:

class="disable-days-12 split-date range-low-19600213"

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.

Using a mixture of text input and selectLists:


Single Input in-line DatePickers

A simple datePicker:

class=“display-inline dateformat-Y-ds-m-ds-d”


OK, the same datepicker as above but now let’s show some week numbers, add a status bar and set a top and bottom range:

class=“display-inline dateformat-Y-ds-m-ds-d show-weeks range-low-1-week range-high-1-month statusformat-l-cc-sp-d-sp-F-sp-Y

Disable/enable demos :

Testing to see if the activation button has been automatically disabled (as the associated form element is disabled):

Testing to see how a popup datePicker reacts to dynamic disabling/enabling:


Testing to see how an inline datePicker reacts to dynamic disabling/enabling:


Callback function demos

A simple datePicker with a callback function disableEasterMonday defined for the redraw event (that dynamicaly calculates Easter Monday for the given year and disables that date in question - view the page source to see the function in question):

class=“dateformat-d-sl-m-sl-Y cb_redraw_disableEasterMonday


A simple datePicker with two callback functions createSpanElement (defined for the create event) and showEnglishDate (defined for the dateselect event) that use the datePickerController.parseDate method to return a more natural English language date which is then rewritten under the associated input - view the page source to see the two functions in question:

class=“dateformat-d-sl-m-sl-Y cb_create_createSpanElement cb_dateselect_showEnglishDate


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