Material UI DateRangePicker 禁用日期 + 7 天答案

【问题标题】：Material UI DateRangePicker disable dates + 7 daysMaterial UI DateRangePicker 禁用日期 + 7 天
【发布时间】：2022-01-05 13:41:47
【问题描述】：

我想禁用用户选择第一个日期后超过 7 天的功能

所以对于这张图片，它应该看起来像这样，但 1 月 30 日被禁用

我的代码

export const CalendarDatePicker = ({ onDateRangeChange }: CalendarDatePickerProps) => {
    const [dateRange, setDateRange] = useState<DateRange<Date>>([null, null])
    const locale = useGlobalStore((state: GlobalState) => state.locale)

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns} locale={locale}>
            <DateRangePicker
                startText=""
                onChange={(newValue) => {
                    setDateRange(newValue)
                    onDateRangeChange(newValue)
                }}
                mask="__/__/____"
                renderInput={({ inputProps, ...startProps }, endProps) => {
                    const startValue = inputProps?.['value']
                    delete inputProps?.['value']
                    return (
                        <TextField
                            {...startProps}
                            inputProps={inputProps ?? {}}
                            InputProps={{
                                startAdornment: <DateRangeIcon className={'text-field--icon'} />,
                            }}
                            value={startValue ? `${startValue} — ${endProps?.inputProps?.['value']}` : ''}
                        />
                    )
                }}
                value={dateRange}
            />
        </LocalizationProvider>
    )
}

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

很简单，你可以设置maxDate试试下面的代码

const getMaxDate = (date) => {
  if (!date) {
    return date;
  }
  const startTime = new Date(date).getTime();
  return new Date(startTime + 7 * 24 * 60 * 60 * 1000);
};

export const CalendarDatePicker = ({ onDateRangeChange }: CalendarDatePickerProps) => {
  const [dateRange, setDateRange] = React.useState([null, null]);
  const locale = useGlobalStore((state: GlobalState) => state.locale)
  const maxDate = React.useMemo(() => getMaxDate(dateRange[0]), [dateRange]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={locale}>
      <DateRangePicker
        startText=""
        onChange={(newValue) => {
          setDateRange(newValue);
        }}
        maxDate={maxDate}
        mask="__/__/____"
        renderInput={({ inputProps, ...startProps }, endProps) => {
          const startValue = inputProps?.["value"];
          delete inputProps?.["value"];
          return (
            <TextField
              {...startProps}
              inputProps={inputProps ?? {}}
              InputProps={{
                startAdornment: <div className={"text-field--icon"} />
              }}
              value={
                startValue
                  ? `${startValue} — ${endProps?.inputProps?.["value"]}`
                  : ""
              }
            />
          );
        }}
        value={dateRange}
      />
    </LocalizationProvider>
  );
}

【讨论】：