| Summary | This article describes the properties and functionality of the datepicker ADC |
| Applies to | Design Version 5.4.4 onwards |
| Written for | Scriptwriters and survey authors |
| Keywords | adc; adc2; javascript; control; design; askiadesign; date ; datepicker |
- To download the qex file (inside the example directory), click here
- Version of the adc: 2.0.2
This control is compatible with all date questions. If the question is using Date and Time, then only apply this ADC to the input for the date part. For the time part use Timepicker.
This ADC only uses plain Javascript and is based on the Pikaday plugin by dbushell. The original code can be found at https://github.com/dbushell/Pikaday
| Property | Description | Options/ possible values |
| General | ||
|---|---|---|
| Theme | Select the theme of the calendar | Light theme; Dark theme |
| Selected Colour | Background colour of selected date | Any RGB color |
| Selected Text Colour | Font Colour of selected date | Any RGB color |
| Hover Colour | Colour of background when date hovered on | Any RGB color |
| Hover Text Colour | Colour of font when date hovered upon | Any RGB color |
| Date | ||
| Show datepicker | automatically show/hide the datepicker on field focus (default true if field is set) | Show; Hide |
| Position | preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left') | bottom left; top left; top right; bottom right |
| defaultDate | the initial date to view when first opened | Yes; No |
| setDefaultDate | make the defaultDate the initial selected value | Yes; No |
| firstDay | first day of the week for the calendar | Sunday; Monday; Tuesday; Wednesday; Thursday; Friday; Saturday |
| disableWeekends | disallow selection of Saturdays and Sundays | Disallow; Allow |
| showWeekNumber | show the ISO week number at the head of the row (default false) | Show; Hide |
| showMonthAfterYear | render the month after year in the title (default false) | Month last; Month first |
| numberOfMonths | number of visible calendars | 1;2;3 |
| mainCalendar | when numberOfMonths is used, this will help you to choose where the main calendar will be (default left, can be set to right). Only used for the first display or when a selected date is not already visible | Left; Right |
The Ranges for the date question are still controlled via the Minimal and Maximal Values of the question.
Comments