Date Picker
Learn about the datepicker component and its usage in Toolpad Studio.
Demo
DatePicker is an input component. It takes user input and provides the value for further usage on the page.
Usage
Below props makes it usable:
format
The format of the date in the UI. The value for the bindings is always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
value
The current selected date. It shows the format in which it is being provided to the page: YYYY-MM-DD.
defaultValue
Allows setting a default value. Example:
name
A name is needed when a textfield is part of a form component. It is used to show validation errors.
Appearance
The DatePicker component supports below mentioned appearance related props in Toolpad Studio:
label
A label that describes the content of the datepicker, for example "Enter date".
variant
The variant property supports three different options: outlined (default), filled, and standard. Outlined is for low-emphasis while Filled is a high-emphasis input. Standard is used for less-pronounced actions that ensure user remains focused on the main content.
fullWidth
This boolean defines if the component should take the full width of the page.
disabled
Disabled property shows the state of the component so that end user is aware that can't interact with the component.