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

【问题标题】：React Day Picker to array of dates excluding Disabled days将日期选择器反应到不包括禁用日期的日期数组
【发布时间】：2017-11-21 16:48:05
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

标签： javascript reactjs date momentjs react-day-picker

【解决方案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)

使用范围示例查看此codesandbox。

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

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

【讨论】：