I have a date range using react-datepicker
(with selectsRange
)
My code snippet looks like:
<DatePicker
onChange={handleChange}
startDate={startDate}
endDate={endDate}
selectsRange
popperPlacement="bottom-start"
disabledKeyboardNavigation
customInput={
<DateRangeCustomInput
isOpen={isOpen}
startDate={startDate}
endDate={endDate}
/>
}
onCalendarClose={handleCalendarClose}
onCalendarOpen={handleCalendarOpen}
maxDate={maxDate}
excludeDates={excludedDates}
/>
My task is to disallow users to choose the same day for time range. For example, it's impossible to choose April 1 for the start and for the end of the range. I mean user shouldn't be able to click on the same day.
I was trying to use minDate
and excludeDates
for that reason, but they change the styles of excluded dates and when user hovers on the end date, there are blank days in the range.