Javascript 在react daterange选择器中未正确显示多个不可用日期的范围

使用react daterange选择器无法正确显示多个不可用日期

表示传递具有不可用块的开始和结束时刻的对象数组。但它并没有显示出预期的结果。它以之字形的方式正确显示不可用的日期

组件

    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;

类日期选择器扩展了React.Component{
.....     
render（）{
报税表（
{this.state.isOpen&&(
)}
);
}
}
导出默认日期选择器；

助手

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

导出函数返回不可用天数（所有日期）{
常量不可用日期=[]；
for（设i=0；i=力矩（））{
不可用日期(
{
状态：“不可用”，
范围：矩。范围(
时刻1，
时刻2，
),
},
);
}
}
返回不可用日期；
}

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

我猜问题中的“之字形”指的是下图所示的模式

您所做的一切都是正确的，但是您忘记了在helper函数

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

导出功能返回不可用天数（所有预订）{
常量不可用日期=[]；
for（设i=0；i=力矩（））{
不可用日期(
{
状态：“不可用”，
范围：矩。范围(
时刻1，
时刻2，
),
},
);
}
}
unavailableDates.sort（（a，b）=>（矩（a.range.start）.isBefore（矩（b.range.start））？-1:1））；
返回不可用日期；
}

基本上，它是按照时间顺序提供日期范围的。有关更多信息，请参阅

最后，输出应该与此图像类似。

---

是的，你说得对。问题在于数组的排序。输入应按时间顺序排列。