使用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会出错吗?
答案 0 :(得分: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。