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

Question

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

在下面的 disabledDays 部分。我无法应用所有三个选项。blocksedDatesData 单独工作，但不能与 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
      ]}
/>

这是一个例子：