React Datepicker - prevent range with disabled dates in between

Question

I am using react-datepicker for a booking system.

I am using filterDate to disable some dates.

<DatePicker
    selected={startDate}
    onChange={changeRangeHandler}
    startDate={startDate}
    endDate={endDate}
    selectsRange
    placeholderText={'Choisir vos dates'}
    minDate={new Date()}
    maxDate={addMonths(new Date(), bookingThreshold)}
    disabled={!regexNum.test(numPersons)}
    locale="fr"
    filterDate={isNotDisabled}
/>

The filtering function:

const isNotDisabled = (date) => {
    return !disabledDates.includes(moment(new Date(date)).format('YYYY-MM-DD'));
}   

disabledDates is a state array that is being updated dynamically.

Since this is for a booking system, once the user selects a check-in date, he should not be able to select a check-out that include disabled dates in between.

I have not seen anything about that particular issue in the documentation or on other posts on StackOverflow.

Answer 1

You can use excludeDates prop. https://reactdatepicker.com/#example-exclude-dates