Unobtrusive JavaScript date-picker widgit

A simple datePicker:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y”

OK, the same datepicker as above but now let’s show some week numbers:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks”

Add a status bar:

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

Let’s highlight Monday & Tuesday:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-12”

Now set a top & bottom range:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year”

Let’s disable the drag & drop functionality:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year disable-drag”

Let’s fill the entire grid with selectable dates:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year disable-drag fill-grid”

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

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year disable-drag fill-grid-no-select”

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

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year fill-grid-no-select opacity-80”

Let’s now disable the fade in/out animation (and remove the default opacity we’ve just set):

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year disable-drag fill-grid-no-select no-animation”

Just for fun, let’s now disable some specific dates:

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 disable-drag fill-grid-no-select no-animation disable-xxxx1225 disable-20070201-20070222”

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

class=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 disable-drag fill-grid-no-select no-animation disable-xxxx1225 disable-20070201-20070222 enable-20070205-20070209”

Using three text inputs:

class="split-date highlight-days-12 fill-grid disable-20080731 no-animation opacity-90 range-low-20060811 range-high-20090913 statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks"

Using 3 selectLists:

class="highlight-days-67 disable-days-12 split-date range-low-1960-02-13 opacity-99"

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.

Day 1st 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th 30th 31st Month January February March April May June July August September October November December Year 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990

Using a mixture of text input and selectLists:

class="highlight-days-67 split-date"

A simple datePicker:

class=“display-inline dateformat-l-cc-sp-d-S-sp-M-sp-Y”

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

class=“display-inline dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y”