Skip to main content

Date Picker

The Date Picker component allows the user to select a date. Date Picker components display in dialogs on mobile devices and text drop-downs on desktops.

The Date Picker component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies a value for the component.
labelnodeSpecifies a label for the component.
initialDatestringSpecifies an initial date in the form of a string.
formatstringSpecifies a date format in the form of a string.
readOnlyboolfalseIf true, the date picker is read only.
disabledboolfalseIf true, the date picker is disabled.
disableFutureboolfalseIf true, future days are disabled, and only past days are selectable.
disablePastboolfalseIf true, past days are disabled, and only future days are selectable.

Style Attributes

NameTypeDefaultDescription
inputVariantstandard
outlined
filled
string
outlinedSpecifies the display type of the component.

For more detail on the Date Picker component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.