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

Question

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

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

我想知道反应日选择器中是否有任何内置的辅助函数可以做同样的事情，而不是自己做这一切。举个例子将不胜感激。

提前谢谢。

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)
  )
}