Skip to main content

DatePicker

Capture user inputted date and time.

DatePicker component

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.

Set default date and 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.

set date to 1 month ago with moment.js

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

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

set date to now with moment.js

{{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.

Manage Timezones

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

PropertyDescription
LabelSet the text to be displayed above the DatePicker
Show IconShow calendar icon inside the DatePicker field
Default DateThe default date set for the DatePicker
Date FormatSelect the date and time format to display
Display Date FormatSets the format of the date displayed in the UI
Manage TimezoneControl the timezone of the DatePicker's output value and display value
Value TimezoneTimezone of the DatePicker's output value - local is dynamic to the user's location
Display TimezoneTimezone of the date displayed in the UI - local is dynamic to the user's location
24 Hr Time12 or 24 hour time format
RequiredMakes selecting a date mandatory, values are a boolean
Minimum DateMinimum allowed date to be set
Maximum DateMaximum allowed date to be set
Loading AnimationControls the loading state of the component, values are a boolean
VisibleSet true to show and false to hide. Set dynamically using Javascript with {{}}

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Selected Date / selectedDatestring"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:

PropertyDescription
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

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 PropertyDescription
onDateSelectedRun an API every time a date is selected