Skip to main content


Capture user inputted date and time.

DatePicker component


Note, a Date Range Picker for selecting a start and end date is coming soon.

Use the selected date and time to create dynamic dashboards with Charts, or build Forms that submit to a database.

DatePicker components are useful for capturing user input for dates.

Set default date and date format

  1. Drag a DatePicker component from the Components panel
  2. In the Properties panel, set the Default Date if required and select the appropriate Date Format.

Set default date and format

Use DatePickers with APIs

Create an API that references the DatePicker via <DATEPICKER_NAME>.selectedDate.

Reference DatePicker in an API

Trigger APIs to run when the DatePicker is changed via onDateSelected.

Trigger API to run onDateSelected

DatePicker Properties

Component Properties

Default DateThe default date set for the DatePicker
Date FormatSelect the date and time format to display
VisibleSet true to show and false to hide. Set dynamically using Javascript with {{}}
Loading AnimationControls the loading state of the component, values are a boolean
RequiredMakes selecting a date mandatory, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the DatePicker, and dot referencing the property. For a DatePicker named DatePicker1:

DatePicker1.selectedDateReturns the selected date as a string
DatePicker1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
DatePicker1.isDisabledReturns the boolean value of the component's disabled state (True, if it is disabled)
DatePicker1.isValidReturns the boolean value of the component's validity (True, if it is valid)
DatePicker1.dateFormatReturns the Date Format property as a string
DatePicker1.outputDateLocalReturns the selected date as a string in the user's local timezone
DatePicker1.outputDateUtcReturns the selected date as a string in UTC


The following events are triggered by user interactions with DatePicker components. Use event handlers to trigger actions in response to user events.

Table Reference PropertyDescription
onDateSelectedRun an API every time a date is selected