Capture user inputted date and time.
Note, a Date Range Picker for selecting a start and end date is coming soon.
DatePicker components are useful for capturing user input for dates.
Set default date and date format
- Drag a DatePicker component from the Components panel
- In the Properties panel, set the Default Date if required and select the appropriate Date Format.
Use DatePickers with APIs
Create an API that references the DatePicker via
Trigger APIs to run when the DatePicker is changed via
|Default Date||The default date set for the DatePicker|
|Date Format||Select the date and time format to display|
|Loading Animation||Controls the loading state of the component, values are a boolean|
|Required||Makes selecting a date mandatory, values are a boolean|
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
|Returns the selected date as a string|
|Returns the boolean value of the component's visibility (True, if it is visible)|
|Returns the boolean value of the component's disabled state (True, if it is disabled)|
|Returns the boolean value of the component's validity (True, if it is valid)|
|Returns the Date Format property as a string|
|Returns the selected date as a string in the user's local timezone|
|Returns 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 Property||Description|
|onDateSelected||Run an API every time a date is selected|