如何添加JSON日期对象以禁用日期

Question

我正在使用此日期选择器组件： https://react-day-picker.js.org/examples/disabled

在下面的disableDays部分中。我无法应用所有三个选项。 blockDatesData可以单独使用，但不能与daysOfWeek和更早版本一起使用。

<DayPicker
        className={className}
        numberOfMonths={numberOfMonths}
        selectedDays={[from, { from, to }]}
        modifiers={ { 
          weekends: {daysOfWeek: [0, 6]},
          start: new Date(from), end: new Date(to) 
        }}
        onDayClick={handleDayClick}
        disabledDays={
            { daysOfWeek: [0, 6] },
            { before: disabledBefore},
            blockedDatesData
          }
    />

以下是生成blockedDatesData json对象的代码。

getBlockedDatesData(){
    let url = API_URL+'blocked_dates'
    return fetch(url)
        .then(response => response.json())
        .then(result => {
            let blockedDatesData = result.data.map(function(row) {
                return {
                    after: new Date(row.date_from), 
                    before: new Date(row.date_to)
                };
            });
            return blockedDatesData;
        })
}

请帮助我解决此问题。预先感谢

Answer 1

您必须在' disabledDays '中放置一个日期数组，所以您应该有这样的内容：

<DayPicker
    className={className}
    numberOfMonths={numberOfMonths}
    selectedDays={[from, { from, to }]}
    modifiers={ { 
      weekends: {daysOfWeek: [0, 6]},
      start: new Date(from), end: new Date(to) 
    }}
    onDayClick={handleDayClick}
    disabledDays={[
        { daysOfWeek: [0, 6] },
        { before: disabledBefore},
        blockedDatesData
      ]}
/>

以下是一个示例：