🚀 MUI X v6 is out! Discover what's new and get started now!

Date range field

The date 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 />
    <SingleInputDateRangeField />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={4}>
    <MultiInputDateRangeField />
    <SingleInputDateRangeField />
  </Stack>
</LocalizationProvider>

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled

Uncontrolled field

Controlled field

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={2} direction="row">
    <SingleInputDateRangeField
      label="Uncontrolled field"
      defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-13')]}
    />
    <SingleInputDateRangeField
      label="Controlled field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={2} direction="row">
    <SingleInputDateRangeField
      label="Uncontrolled field"
      defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-13')]}
    />
    <SingleInputDateRangeField
      label="Controlled field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

Press Enter to start editing