Date Picker

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.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property	Description
Border Color	Sets the color of the input border
Active Border Color	Sets the color of the input border when active
Label Color	Sets the color of the input label
Label Size	Sets the font size of the input label
Left Icon Mode	Sets the display mode for the left icon. Defaults to `inset`

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.
Format	Allows users to set a Date format. (Eg. mm/dd/yyyy , MM/yyyy etc.)
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.
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
Data Source	Initialize the stateful component with a value from a data source.
Label	The label of the picker is displayed directly above the selected date.
Minimum Date	The minimum date that can be selected
Maximum Date	The maximum date that can be selected
Disabled	Whether the picker should be disabled. Will prevent selection and show a greyed out state.
Left Icon Name	The icon to display on the left side of the input
Custom Left Icon	Render an icon using a string of the icon's identifier. Overrides the 'icon' property. Full list of icons here. Ex: 'Foundation/align-right', 'Feather/check'

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Trigger name	Description
On Date Changed	Runs the Actions when the date is changed

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.