javascript - 将日期选择器反应到不包括禁用日期的日期数组

Question

我有一系列禁用日期。我从这里尝试了日期狂暴点击示例http://react-day-picker.js.org/examples/?range以获取更新的起始日期和截止日期。但是，我会从所选范围中获取日期数组，而不是开始日期和结束日期，并且不包括禁用日期（如果有）。

我认为，我可以使用时刻来计算从日期和到日期之间的差异，以生成该范围的日期数组，并消除有条件的禁用日期。

我想知道react-day-picker中是否有任何内置的辅助函数可以做同样的事情，而不是自己做。一个例子将不胜感激。

提前致谢。

Answer 1

您可以遍历范围内的天数并使用包含的天数填充数组：

let daysList = [];
if (range.from && range.to) {
  daysList = [range.from];

  while (daysList[daysList.length - 1] < range.to) {

    let day = daysList[daysList.length - 1];
    let dayToAdd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);

    if (!isDisabled(dayToAdd)) { // here check if the day is disabled
      daysList.push(dayToAdd);
    }
  }

  daysList.pop();
}
console.log("Selected days:", daysList)

使用范围示例查看此代码框。

您需要实现自己的isDisabled功能（这取决于您存储禁用日期的位置），可能是这样的：

disabledDays=[] // your array of disabled days
function isDisabled(day) {
  return disabledDays.find(disabledDay => 
     DateUtils.isSameDay(day, disabledDay)
  )
}