Prevent range with disabled dates in between

[jo-goburdhun]

Describe the bug The datepicker allows me to select a range with disabled dates in between even when the selectsDisabledDaysInRange prop is not present

To Reproduce If you go to the following demo and you remove the selectsDisabledDaysInRange, the datepicker still allows to select range with disabled dates in between: https://reactdatepicker.com/#example-date-range-for-one-datepicker-with-disabled-dates-highlighted

Expected behavior The datepicker should not allow a user to select a range with disabled dates in between

[Learning-X]

Getting the same behavior on my side as well.

[Akram-Sakib]

Need Solution please

[jo-goburdhun]

What I ended doing was changing the maxDate dynamically.

I have an array of disabled dates sorted in ascending order.

const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [maxDate, setMaxDate] = useState(null);
const [maxDateDatepicker, setMaxDateDatepicker] = useState(null);

const changeRangeHandler = (dates) => {      
        const [start, end] = dates;

        setStartDate(start);

        if (end == null) {
            setEndDate(end);

            if (startDate != null && start.toString() === startDate.toString()) {
                setStartDate(null);
                setMaxDateDatepicker(maxDate);
            } else if (disabledDates.length > 0) {
                for (const date of disabledDates) {
                    if (moment(new Date(date)).isAfter(new Date(start))) {
                        setMaxDateDatepicker(new Date(date));
                        break;
                    }
                }
            }
        } else if (start.toString() !== end.toString()) {
            setEndDate(end);
        }
    };

<DatePicker
    dateFormat="dd/MM/yyyy"
    selected={null}
    onChange={changeRangeHandler}
    startDate={startDate}
    endDate={endDate}
    selectsRange
    placeholderText={'Choisir vos dates'}
    minDate={new Date()}
    maxDate={maxDateDatepicker}
>

[maniguerra]

Well, you're expecting wrong thing. In https://github.com/Hacker0x01/react-datepicker/releases, says:

Add selectsDisabledDaysInRange prop to allow highlighting disabled dates in range

So, is not for disable dates selected on range, is just for high light them, and works fine.

[emir-ekin-ors]

Same here. I achieved intended behavior like this:

const availableDates = [
  { startDate: '2024-03-05', endDate: '2024-03-10' },
  { startDate: '2024-04-01', endDate: '2024-04-28' }
];

const adjustedDates = availableDates.map(({ start_date, end_date }) => ({
    start_date: new Date(new Date(start_date).getTime() - 24 * 60 * 60 * 1000), // Subtract 1 day
    end_date: new Date(end_date)
  }));

const handleSelect = ranges => {
  const { startDate, endDate } = ranges.selection;
  if (startDate && endDate) {
    const isInRange = adjustedDates.some(range => 
      startDate >= range.start_date && endDate <= range.end_date
    );
    if (isInRange) {
      setRange([ranges.selection]);
    }
  } else {
    setRange([ranges.selection]);
  }
};