React Datepicker - 防止范围内禁用日期答案

【问题标题】：React Datepicker - prevent range with disabled dates in betweenReact Datepicker - 防止范围内禁用日期
【发布时间】：2022-12-15 00:59:47
【问题描述】：

我正在使用 react-datepicker 作为预订系统。

我正在使用 filterDate 来禁用某些日期。

<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}
/>

过滤功能：

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

disabledDates 是一个动态更新的状态数组。

由于这是一个预订系统，一旦用户选择了一个入住日期，他就不能选择一个包含禁用日期的退房日期。

我没有在文档或 StackOverflow 上的其他帖子中看到任何关于该特定问题的信息。

【问题讨论】：

标签： javascript reactjs react-datepicker

【解决方案1】：

你可以使用 excludeDates 道具。 https://reactdatepicker.com/#example-exclude-dates

【讨论】：

excludeDates 仍然让我选择一个介于两者之间的禁用日期的范围

【解决方案2】：

您好，您可以创建一个函数来检查所选日期是否包括排除的日期（挂钩到数据选择器的 Onchange）

enter image description here

'CalcolaGiorni' is a function that returns a vector of timestamps starting from the starting day to the ending day

【讨论】：