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.