CODEWITHSUNDEEP
reactjsvalidationreact-datepicker
Hithesh kumar
Hithesh kumar

Reputation: 1036

How Prevent User for selecting start-date greater than end-date in `react-datePicker`?

How to Restrict in such that startDate should not be greater than endDate in react-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}
      />
    </>
  );
};

example demo react-datepicker docs

Upvotes: 0

Views: 3863

Answers (2)

Hithesh kumar
Hithesh kumar

Reputation: 1036

Found the solution :

define maxDate={endDate} in start date picker

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

Upvotes: 2

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

Similar to minDate prop, you can use maxDate prop to set maximum selectable date in DatePicker

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

Upvotes: 2

Related Questions