Unobtrusive JavaScript date-picker widgit v5

A simple datePicker using a dd/mm/yyyy date format and whose associated input value is set to "13/03/2009".

Demo 1 :

Now let’s show some week numbers and change the date format slightly in order to display two figure years.

Demo 2 :

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

Demo 3 :

Let’s highlight Monday & Tuesday.

Demo 4 :

Let’s set a top range of one year from today and a bottom range of 35 days before todays date.

Demo 5 :

Let’s fill the entire grid with selectable dates.

Demo 6 :

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

Demo 7 :

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

Demo 8 :

Let’s now disable the fade in/out animation and the selection of Saturday & Sunday.

Demo 9 :

Let’s now disable some specific dates using wildcards (the 1^st to the 22^nd of this month and the 25^th of December for all years).

Demo 10 :

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) and enable only the 1^st to the 18^th and 26^th to the 28^thof this month and the 10^th to the 20^th of next month. We’ll also set a wildcard enabled date that enables the 2^nd day of all months for all years ("******02").

Demo 11 :

Demo 12: Using three text inputs and removing the today button from the U.I.

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

Demo 14: Using 3 selectLists and disabling Monday and Tuesday. Note: the high & low ranges will be automatically calculated by the script when selectLists are used to represent the year so there’s no need to set the rangeLow and rangeHigh variables.

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

Demo 15: Using a mixture of text input and selectLists.

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

Demo 16: Using a selectList to represent both month and year date parts. Again, you shouldn’t have to set the ranges as they are calculated for you whenever selectLists are used to represent the year.

Month & Year January 2008 February 2008 March 2008 April 2008 May 2008 June 2008 July 2008 August 2008 September 2008 October 2008 November 2008 December 2008

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 (the 1^st of last month to the 10^th of next month).

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

Demo 19 :

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

Demo 20 :

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

Demo 21 :

A simple datePicker with a callback function disableEasterMonday defined for the “redraw” event that dynamicaly calculates Easter Monday for the given year, disables the date and sets a bespoke title "Easter Monday" for the date in question.

Demo 22 :

A simple datePicker with a callback function showEnglishDate defined for both the “create” and the “dateset” events that uses the datePickerController.parseDate method to return a more natural English language date, which is then rewritten beside the associated input.

Demo 23 :