A field for the user to select a date and time.

Adding Date Picker component

Select the Date Picker component from the Components drawer. You can open the list of components by clicking the + button next to Components.

ce0b0af-CleanShot_2021-10-04_at_22.24.05.jpg

The Date Picker component has a Field Name property with default value of date. You would want to use this value to manipulate or display data from an incoming API request.

Configuration Properties

Property	Description
Component name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Date Picker.
Field Name	The name of the value of the component is used on the `onDateChange` function to log user input. It will be executed once the user has selected a date.
Mode	Allows you to select the mode of the date picker field. Modes available: date, time, and datetime.
Assistive text	Helper text to be displayed underneath the picker, useful for providing additional instructions.
Locale	iOS only. Allows changing of the locale of the component. For example, `es-ES`. By default, it uses the device's locale.
Minute Interval	The interval at which minutes can be selected. Possible values are: `1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30`.
Time Zone Offset	Allows changing of the `timeZone` of the date picker. Accepts a numerical value, for example, `60`. By default, it uses the device's time zone.
Disabled	When enabled, the date picker will be grayed out and the user will not be able to make a selection.
Left Icon Name	The name of the icon selected from the icon picker to be displayed on the left.
Left Icon Mode	Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the picker and outset displays the icon outside of the date picker border.
Right Icon Name	The name of the icon selected from the icon picker to be displayed on the right.
Appearance	Appearance of the date picker modal. Available values: solid or underlined.

Data Configuration

Property	Description
Initial Value	Initialize the stateful component with a value from a data source.
Label	The label of the picker is displayed directly above the selected date.
Error	When enabled, an outline matching the theme's defined Error color will appear around the picker. Must be a boolean value: true or false.

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Label

The label of the picker is displayed directly above the selected date.

Error

When enabled, an outline matching the theme's defined Error color will appear around the picker.

Must be a boolean value: true or false.

Changing the Mode of Date Picker

To change the mode of Date Picker, for example, from date to datetime:

Go to the Configs tab (second tab) in the Properties Panel.
One the property Mode, from the dropdown menu, select datetime.

Formatting Date with Custom Code

📘
At times, when making a POST HTTP request to your REST API service, you may want to add some formatting to the date value. You can use an external library such as Dayjs or Moment.js. Check out the community post here for more information.