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 1st to the 22nd of this month and the 25th 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 1st to the 18th and 26th to the 28thof this month and the 10th to the 20th of next month. We’ll also set a wildcard enabled date that enables the 2nd 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.
Demo 15: Using a mixture of text input and selectLists.
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
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 1st of last month to the 10th 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 :
View the related “language in the lab” post for this demo.