Skip to content

DateField API

API reference docs for the React DateField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { DateField } from '@mui/x-date-pickers-pro/DateField';
// or
import { DateField } from '@mui/x-date-pickers/DateField';
// or
import { DateField } from '@mui/x-date-pickers-pro';
// or
import { DateField } from '@mui/x-date-pickers';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiDateField can be used when providing default props or style overrides in the theme.

Props

Props of the native component are also available.

NameTypeDefaultDescription
autoFocusboolfalse
If true, the input element is focused during the first mount.
color'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
'primary'
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
componentsobject{}
Overridable components.
componentsPropsobject{}
The props used for each component slot.
defaultValueany
The default value. Use when the component is not controlled.
disabledboolfalse
If true, the component is disabled.
disableFutureboolfalse
If true, disable values after the current date for date components, time for time components and both for date time components.
disablePastboolfalse
If true, disable values before the current date for date components, time for time components and both for date time components.
focusedboolfalse
If true, the component is displayed in focused state.
formatstring
Format of the date when rendered in the input(s).
formatDensity'dense'
| 'spacious'
"dense"
Density of the format when rendered in the input. Setting formatDensity to "spacious" will add a space before and after each /, - and . character.
FormHelperTextPropsobject
Props applied to the FormHelperText element.
fullWidthboolfalse
If true, the input will take up the full width of its container.
helperTextnode
The helper text content.
hiddenLabelboolfalse
If true, the label is hidden. This is used to increase density for a FilledInput. Be sure to add aria-label to the input element.
idstring
The id of the input element. Use this prop to make label and helperText accessible for screen readers.
InputLabelPropsobject
Props applied to the InputLabel element. Pointer events like onClick are enabled if and only if shrink is true.
inputPropsobject
Attributes applied to the input element.
InputPropsobject
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
inputReffunc
| { current: any }
Pass a ref to the input element.
labelnode
The label content.
margin'dense'
| 'none'
| 'normal'
'none'
If dense or normal, will adjust vertical spacing of this and contained components.
maxDateany
Maximal selectable date.
minDateany
Minimal selectable date.
namestring
Name attribute of the input element.
onChangefunc
Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.
onErrorfunc
Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.
onSelectedSectionsChangefunc
Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.
readOnlyboolfalse
It prevents the user from changing the value of the field (not from interacting with the field).
referenceDateanyThe closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
The date used to generate a part of the date-time that is not present in the format when both value and defaultValue are not present. For example, on time fields it will be used to determine the date to set.
requiredboolfalse
If true, the label is displayed as required and the input element is required.
selectedSections'all'
| 'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }
The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.
shouldDisableDatefunc
Disable specific date.

Signature:
function(day: TDate) => boolean
day: The date to test.
returns (boolean): If true the date will be disabled.
shouldDisableMonthfunc
Disable specific month.

Signature:
function(month: TDate) => boolean
month: The month to test.
returns (boolean): If true, the month will be disabled.
shouldDisableYearfunc
Disable specific year.

Signature:
function(year: TDate) => boolean
year: The year to test.
returns (boolean): If true, the year will be disabled.
shouldRespectLeadingZerosbool`false`
If true, the format will respect the leading zeroes (e.g: on dayjs, the format M/D/YYYY will render 8/16/2018) If false, the format will always add leading zeroes (e.g: on dayjs, the format M/D/YYYY will render 08/16/2018)
Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so shouldRespectLeadingZeros={true} might lead to inconsistencies when using AdapterLuxon.
Warning n°2: When shouldRespectLeadingZeros={true}, the field will add an invisible character on the sections containing a single digit to make sure onChange is fired. If you need to get the clean value from the input, you can remove this character using input.value.replace(/\u200e/g, '').
Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros. This mean that when using shouldRespectLeadingZeros={false}, if you retrieve the value directly from the input (not listening to onChange) and your format contains tokens without leading zeros, the value will not be parsed by your library.
size'medium'
| 'small'
The size of the component.
slotPropsobject{}
The props used for each component slot.
slotsobject{}
Overridable component slots.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
unstableFieldReffunc
| object
The ref object used to imperatively interact with the field.
valueany
The selected value. Used when the component is controlled.
variant'filled'
| 'outlined'
| 'standard'
'outlined'
The variant to use.

Slots

NameTypeDefaultDescription
TextFieldelementTypeTextField from '@mui/material'
Form control with an input to render the value. Receives the same props as @mui/material/TextField.
The ref is forwarded to the root element.

CSS

Rule nameGlobal classDescription
root.MuiDateField-rootStyles applied to the root element.

You can override the style of the component using one of these customization options: