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.
|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.
|Label||The label of the picker is displayed directly above the selected date.|
|Data Source||Initialize the stateful component with a value from a data source.|
Changing the Mode of Date Picker
To change the mode of Date Picker, for example, from
- Go to the Configs tab (second tab) in the Properties Panel.
- One the property Mode, from the dropdown menu, select
Formatting Date with Custom Code
At times, when making a
POSTHTTP 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.
Updated 7 months ago