Unobtrusive JavaScript date-picker widgit v4

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

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

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

class=“dateformat-d-sl-m-sl-Y show-weeks”

Add a status bar:

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

Let’s highlight Monday & Tuesday:

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

Now set a top & bottom range:

class=“dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-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-S-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-S-sp-F-sp-Y highlight-days-67 fill-grid”

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

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

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

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

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

class=“dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y 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-S-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=“dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-S-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-S-sp-F-sp-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y”

Using three text inputs and disabling the today button:

class="split-date fill-grid statusformat-l-cc-sp-d-S-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-S-sp-F-sp-Y show-weeks button-butt-wrapper"

Using 3 selectLists:

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.

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="split-date"

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-S-sp-F-sp-Y”

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:

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”