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

Question

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

Documentation表示传递一组对象，这些对象的开始和结束时刻不可用。但是它没有显示出预期的结果。它正确地显示了不可用的日期，但以Z字形显示。

组件

    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

我猜问题中的之字形一词是指下图中显示的模式。

您所做的一切都正确，但是您忘记了在辅助函数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。

最后输出应类似于此图像。