How to validate End date which is less than the Start date in react and add error message in banner if the end date is less than start date in react

Question

enter image description hereHow to validate End date which is less than the Start date in react and add error message in banner if the end date is less than start date in react.

I have edit profile page there I should display the error message in the banner to say like end date cannot be less than start date.

Note: using react-datepicker component

Start date: 05-25-2021 End date: 05-19-2021

score 1 · Accepted Answer · answered May 10 '21 at 09:58

1

Why don't you use minDate in end date datepicker putting start date? Something like:

 <DatePicker //<-- this is the end date picker
    selected={endDate}
    onChange={date => setEndDate(date)}
    minDate={new Date(startDate)} //<-- here put as minDate the startDate so user cannot select a date less than startDate
    placeholderText="Select a date"
/>

answered May 10 '21 at 09:58

Giovanni Esposito

10,696
1
14
30

I am using same component for both start date and date end, in that case how can we pass minDate ? – JaShVi May 10 '21 at 10:31
Conditional minDate based on what date user is setting. If is startDate then minDate is 1899 (for instances), else minDate is startDate. Make sense? – Giovanni Esposito May 10 '21 at 10:33
Yes correct but you could also modify minDate I wrote by adding 1 day. – Giovanni Esposito May 10 '21 at 10:41
minDate={new Date((StartDate)+1)} this is not working for with plus one day, it will display all the dates – JaShVi May 10 '21 at 10:44
You should do `new Date().setDate(new Date(partnerStartDate).getDate() + 1);` take a look at [here](https://stackoverflow.com/questions/9989382/how-can-i-add-1-day-to-current-date/9989458) – Giovanni Esposito May 10 '21 at 10:47
few cases it's not working, attached image here – JaShVi May 10 '21 at 11:27

How to validate End date which is less than the Start date in react and add error message in banner if the end date is less than start date in react

1 Answers1