DatePicker

Capture user inputted date and time.

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 with or without a time element.

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.
3. If required, set a Display Date Format.

Use the JavaScript Moment library to set dynamic default dates. For example, for a one month date range, create a start date DatePicker with a default date from one month ago.

{{moment().subtract(1, 'month').format("YYYY-MM-DD")}}

Configure the end date to always show today's date.

{{moment().format("YYYY-MM-DD")}}

Note, the Date Format dropdown uses the same Moment formatting tokens.

Managing Timezones

Create a DatePicker that stores the time in UTC but displays in the user's timezone.

1. Enable Manage Timezone.
2. Set the Value Timezone. This is the output value of the DatePicker, UTC is most commonly stored in databases. local is dynamic based on the end user's location.
3. Set the Display Timezone. This is the timezone of the date displayed in the UI, local may be most appropriate.

Use DatePickers with APIs

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

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

DatePicker Properties

Component Properties

Property	Description
Label	Set the text to be displayed above the DatePicker
Label Text Style	Changes the style (font, size, etc.) of the DatePicker's label text. Configure styles in the Typography settings
Label Text Color	Changes the color of the DatePicker's label text
Show Icon	Show calendar icon inside the DatePicker field
Default Date	The default date set for the DatePicker
Date Format	Select the date and time format to display
Display Date Format	Sets the format of the date displayed in the UI
Manage Timezone	Control the timezone of the DatePicker's output value and display value
Value Timezone	Timezone of the DatePicker's output value - local is dynamic to the user's location
Display Timezone	Timezone of the date displayed in the UI - local is dynamic to the user's location
24 Hr Time	12 or 24 hour time format
Input Text Style	Changes the style (font, size, etc.) of the DatePicker's input text. Configure styles in the Typography settings
Input Text Color	Changes the color of the DatePicker's input text
Required	Makes selecting a date mandatory, values are a boolean
Minimum Date	Minimum allowed date to be set
Maximum Date	Maximum allowed date to be set
Loading Animation	Controls the loading state of the component, values are a boolean
Visible	Set true to show and false to hide. Set dynamically using JavaScript with {{}}

Settable Properties

Property Via Form / Via RunJS	Type	Example Value
Selected Date / selectedDate	string	"07/04/2022"

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:

Property	Description
DatePicker1.selectedDate	Returns the selected date as a string
DatePicker1.isVisible	Returns the boolean value of the component's visibility (True, if it is visible)
DatePicker1.isDisabled	Returns the boolean value of the component's disabled state (True, if it is disabled)
DatePicker1.isValid	Returns the boolean value of the component's validity (True, if it is valid)
DatePicker1.dateFormat	Returns the Date Format property as a string
DatePicker1.outputDateLocal	Returns the selected date as a string in the user's local timezone
DatePicker1.outputDateUtc	Returns the selected date as a string in UTC

Events

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