日期范围选择器最大日期是 ReactJS 中所选日期的 30 天

【问题标题】：Date range picker Max date is 30 days from the selected Date in ReactJS日期范围选择器最大日期是 ReactJS 中所选日期的 30 天
【发布时间】：2022-01-05 08:42:50
【问题描述】：

如何在日期范围选择器中设置从所选日期起+30天的最大日期。

<LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateRangePicker
          startText="Start date"
          endText="End date"
          minDate={new Date()}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(startProps, endProps) => (
            <React.Fragment>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </React.Fragment>
          )}
        />
      </LocalizationProvider>

【问题讨论】：

你有一个maxDate 属性。只需根据当前选择的日期进行更改即可。

标签： reactjs material-ui daterangepicker

【解决方案1】：

export const MyDateRangePicker = () => {
  const [value, setValue] = useState<DateRange<Date>>([null, null])

  const getMaxDate = (date) => {
    if (!date) {
      return date
    }
    const startTime = new Date(date).getTime()
    const month = date.getMonth();
    const year = date.getFullYear();
    const daysInMonth = new Date(year, month, 0).getDate();
    return new Date(startTime + daysInMonth * 24 * 60 * 60 * 1000)
  }

  const maxDate = React.useMemo(() => getMaxDate(value[0]), [value])

  return(
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateRangePicker
          startText="Start date"
          endText="End date"
          minDate={new Date()}
          maxDate={maxDate}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(startProps, endProps) => (
            <React.Fragment>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </React.Fragment>
          )}
        />
      </LocalizationProvider>
    )
  }
}

【讨论】：