reactjs - 如何防止用户在“react-datePicker”中选择大于结束日期的开始日期？

Question

如何限制startDate不应该大于endDatereact-datePicker

() => {
  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
  const [endDate, setEndDate] = useState(new Date("2014/02/10"));
  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      <DatePicker
        selected={endDate}
        onChange={date => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
      />
    </>
  );
};

示例演示 react-datepicker 文档

标签： reactjsvalidationreact-datepicker

Answer 1

与minDateprop 类似，您可以使用maxDateprop 设置最大可选日期DatePicker

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  selectsStart
  startDate={startDate}
  endDate={endDate}
  maxDate={endDate}
/>