反应日期范围选择器中多个不可​​用日期的范围未正确显示

Question

使用 react-daterange-picker 无法正确显示多个不可用的日期。

Documentation 表示要传递一个对象数组，其中包含不可用块的开始和结束时刻。但它没有按预期显示结果。它以曲折的方式正确显示不可用的日期。

组件

    class DatePicker extends React.Component {
    .....     
    render() {
        return (    
                {this.state.isOpen && (
                    <DateRangePicker
                        firstOfWeek={1}
                        numberOfCalendars={2}
                        selectionType='range'
                        minimumDate={moment()}
                        stateDefinitions={stateDefinitions}
                        dateStates={this.state.BadDates}
                        defaultState="available"
                        showLegend={true}
                        value={this.state.value}
                        onSelect={this.onSelect}
                        singleDateRange={false}
                        selectionType="range"
                        maximumDate={moment().startOf('month').add(4, 'months')}
                    />
                )}
        );
    }
}
export default DatePicker;

帮助者

export function returnUnavailableDays(allDates) {
    const unavailableDates = [];
    for (let i = 0; i < allDates.length; i++) {
        const moment1 = moment(allDates[i].check_in);
        const moment2 = moment(allDates[i].check_out);
        if (moment1 >= moment()) {
        unavailableDates.push(
            {
            state: 'unavailable',
            range: moment.range(
                moment1,
                moment2,
            ),
            },
        );
        }
    }
    return unavailableDates;
}

我不确定将数组的值作为道具传递给 DateRangePicker 会出现什么问题？

Answer 1

我猜问题中的术语 Zig-zag 指的是下图中显示的模式。

您所做的一切都是正确的，但是您忘记在帮助函数 returnUnavailableDays() 的末尾添加这行代码。

将此行添加到您的代码后

unavailableDates.sort((a, b) => (moment(a.range.start).isBefore(moment(b.range.start)) ? -1 : 1));

你的助手应该看起来像

export function returnUnavailableDays(allBookings) {
const unavailableDates = [];
for (let i = 0; i < allBookings.length; i++) {
    const moment1 = moment(allBookings[i].check_in);
    const moment2 = moment(allBookings[i].check_out);
    if (moment1 >= moment()) {
    unavailableDates.push(
        {
        state: 'unavailable',
        range: moment.range(
            moment1,
            moment2,
        ),
        },
    );
    }
}
unavailableDates.sort((a, b) => (moment(a.range.start).isBefore(moment(b.range.start)) ? -1 : 1));
return unavailableDates;
}

基本上，它的作用是按时间顺序提供您的日期范围。更多信息请参考this issue。

最终输出应该看起来像这个图像。