Date Range Field

The Date Range Field let the user select a date range with the keyboard.

Basic usage

You can render your Date Range Field with either one input using SingleInputDateRangeField or two inputs using MultiInputDateRangeField as show below.

—

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={4}>
    <MultiInputDateRangeField
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
    <SingleInputDateRangeField
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={4}>
    <MultiInputDateRangeField
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
    <SingleInputDateRangeField
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled field

Controlled field