Search code examples
javascriptreactjsreact-datepicker

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

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

Solution

  • 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"
/>