如何在 MUI 5 日期范围选择器中添加预设范围

Question

我正在使用 MUI 5 日期范围选择器我的任务是我需要在日期范围选择器中的页脚位置添加预设范围（如果我们可以这样做的话）所以我需要在我的 MUI 日期中添加它选择器，如果我点击那个日期选择器日期的任何范围，当我们 select 现在我不知道如何在 MUI 日期选择器

中添加特定范围

                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>
  );
}

像这样，如果我们可以添加

Answer 1

只需使用 components prop of DateRangePicker 并在 Action 容器中添加按钮。

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>
  );
}

这里是 Codesandbox sample.

根据需要添加其他按钮。

Answer 2

复制之前的答案，我刚刚做了一个改进 - 它创建了所有按钮并将选择设置为 ranges 数组中的相应值：

interface IRangeProps {
  [key: string]: any;
}

const ranges: IRangeProps = {
  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 function App() {
  const [value, setValue] = React.useState<DateRange<Date>>([null, null]);

  const handleRangeclick = (rangeValue: DateRange<Date>) => {
    setValue(rangeValue);
  };

  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">
              {Object.keys(ranges).map((key) => {
                return (
                  <Button
                    key={key}
                    onClick={() => handleRangeclick(ranges[key])}
                    variant="outlined"
                  >
                    {key}
                  </Button>
                );
              })}
            </Stack>
          )
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

export default App;

如果那是你想要的，我认为 @Adel Armand 答案应该被接受为正确的答案，他做得很好，我只是想展示一种更自动的方式。

如何在 MUI 5 日期范围选择器中添加预设范围

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

javascript

reactjs

material-ui

date-range