I want to disable for user an ability to chose more than 7 days after it chose first date

So for this picture it should look like this but 30th of January is disabled

My code

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

CodePudding user response：

Its simple, you can set maxDate try the below code

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