How can i add Preset Ranges in MUI 5 date range picker

Question

I am using MUI 5 date range picker my task is I need to add Preset Ranges in the place of the footer in the date range picker if any way we can do it so I need to add that in my MUI date picker if I click on that any range that date picker date will change accordingly when we select right now I don't have any idea how can I add certain range in MUI date picker

                ranges={{
                  Yesterday: [
                    moment().subtract(1, "day").startOf("day"),
                    moment().endOf("day"),
                  ],
                  Today: [
                    moment().startOf("day"),
                    moment().add(1, "day").endOf("day"),
                  ],
                  "Last Week": [
                    moment().subtract(1, "week").startOf("isoWeek"),
                    moment().subtract(1, "week").endOf("isoWeek"),
                  ],
                  "Last Month": [
                    moment().subtract(1, "month").startOf("month"),
                    moment().subtract(1, "month").endOf("month"),
                  ],
                  "This Month": [
                    moment().startOf("month"),
                    moment().endOf("month"),
                  ],
                  "Last Year": [
                    moment().subtract(1, "year").startOf("year"),
                    moment().subtract(1, "year").endOf("year"),
                  ],
                  "This Year": [
                    moment().startOf("year"),
                    moment().endOf("year"),
                  ],
                }}
export default function BasicDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

like this, if we can add

Answer 1

Simply use the components prop of DateRangePicker and add buttons in Action container.

export function App() {
  const [value, setValue] = React.useState<DateRange<Date>>([null, null]);

  const handleClickOnToday = () => {
    setValue([
      moment().startOf("day").toDate(),
      moment().add(1, "day").endOf("day").toDate()
    ]);
  };

  const handleClickOnYesterday = () => {
    setValue([
      moment().subtract(1, "day").startOf("day").toDate(),
      moment().endOf("day").toDate()
    ]);
  };

  const handleClickOnLastWeek = () => {
    setValue([
      moment().subtract(1, "week").startOf("isoWeek").toDate(),
      moment().subtract(1, "week").endOf("isoWeek").toDate()
    ]);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        components={{
          ActionBar: () => (
            <Stack spacing={2} p={1} direction="row">
              <Button onClick={handleClickOnToday} variant="outlined">
                Today
              </Button>
              <Button onClick={handleClickOnYesterday} variant="outlined">
                Yesterday
              </Button>
              <Button onClick={handleClickOnLastWeek} variant="outlined">
                Last Week
              </Button>
            </Stack>
          )
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

Here is the Codesandbox sample.

Add other buttons as you wish.