Fields

The field components let the user input date and time values with a keyboard and refined keyboard navigation.

Introduction

The fields are React components that let you enter a date or time with the keyboard, without using any popover or modal UI. They provide refined navigation through arrow keys and support advanced behaviors like localization and validation.

Fields to edit a single element

DateField

TimeField

DateTimeField

Fields to edit a range

All fields to edit a range are available in a single input version and in a multi input version.

MultiInputDateRangeField

—

SingleInputDateRangeField

MultiInputTimeRangeField

—

SingleInputTimeRangeField

MultiInputDateTimeRangeField

—

SingleInputDateTimeRangeField

Advanced

When is `onChange` called?

The field components have an internal state to update the visible value.

It will only call the onChange callback when all the sections of the modified date are filled.

On single element fields

On a single date field (DateField / DateTimeField / TimeField), onChange will be called if all the sections are filled.

In the example below, onChange will not be fired until the date is fully completed:

Value: null

On range fields

On a date range field (SingleInputDateRangeField / MultiInputDateRangeField), onChange will be called if all the sections of the date you modified are filled, even if some sections of the other date are not filled.

In the demo below, changing the value of a start date section will fire onChange even if the end date is empty. But changing the value of an end date section will not fire onChange until the end date is fully completed:

Value: 04/07/2022 – null

Only update when the value is valid

The onChange callback received a 2nd parameter containing the validation error associated to the current value. If you only want to update your state when the value is valid, you can ignore any onChange call with a non-null validationError.

In the example below, onChange will only be fired if the date is valid and its year is 2022:

Value: null

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateField
    value={value}
    onChange={(newValue, context) => {
      if (context.validationError == null) {
        setValue(newValue);
      }
    }}
    minDate={dayjs('2022-01-01')}
    maxDate={dayjs('2022-12-31')}
  />
</LocalizationProvider>
<Typography>Value: {value == null ? 'null' : value.format('L')}</Typography>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateField
    value={value}
    onChange={(newValue, context) => {
      if (context.validationError == null) {
        setValue(newValue);
      }
    }}
    minDate={dayjs('2022-01-01')}
    maxDate={dayjs('2022-12-31')}
  />
</LocalizationProvider>
<Typography>Value: {value == null ? 'null' : value.format('L')}</Typography>

Press Enter to start editing

Control the selected sections

Use the selectedSections and onSelectedSectionsChange props to control which sections are currently being selected.

This prop accepts the following formats:

If a number is provided, the section at this index will be selected.
If "all" is provided, all the sections will be selected.
If an object with a startIndex and endIndex fields are provided, the sections between those two indexes will be selected.
If a string of type MuiDateSectionName is provided, the first section with that name will be selected.
If null is provided, no section will be selected

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.