1

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.

enter image description here

Alexandre Adereyko
  • 438
  • 2
  • 4
  • 12

0 Answers0