Date Picker

Date Picker

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

Property Description Options/ possible values
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
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.

Have more questions? Submit a request