Skip to main content

DatePicker

This component is useful for capturing user input for dates, with or without a time element.

DatePicker component

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

DatePicker Properties

Component Properties

PropertyDescription
Content
LabelSet the text to be displayed above the DatePicker
Default dateThe default date set for the DatePicker
Value formatSets the format of the selected date
Display formatSets the format of the date displayed in the UI
Manage timezoneAllows you to toggle on or off to manage the timezone for the Datepicker's output value and display
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
Appearance
Label styleChanges the style (font, size, color etc.) of the DatePicker's label text. Configure styles in the Typography settings
Input text styleChanges the style (font, size, color etc.) of the DatePicker's input text. Configure styles in the Typography settings
Input backgroundChanges the color of the input background
Input borderChanges the color of the input border
Input border radiusChanges the input border radius
Show iconShow calendar icon inside the DatePicker field
Loading AnimationControls the loading state of the component, values are a boolean
Layout
WidthControls the width of the component
HeightControls the height of the component
Label positionPosition the label above or to the side of the input
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}
Collapse when invisibleControls what happens when the component is invisible. When true, other components shift to fill its space; when false, it leaves a blank space. This has no effect in edit mode.
Interaction
RequiredMakes selecting a date mandatory, values are a boolean
Minimum DateMinimum allowed date to be set
Maximum DateMaximum allowed date to be set
DisabledDisables user interaction with this component
Error displayChoose whether to display errors in a Tooltip or Inline
ValidationSets a custom validation rule

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

Example Usage:

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

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