Date range field

The date field let the user select a date range with the keyboard.

Basic usage

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateRangeField value={value} onChange={(newValue) => setValue(newValue)} />
</LocalizationProvider>

Multi input

You can render the start and end date in standalone inputs using MultiInputDateRangeField. All the topics covered below are also applicable to this component unless explicitly mentioned.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <MultiInputDateRangeField
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</LocalizationProvider>