1

我在 react-datepicker 上遇到了一个奇怪的问题。我已经让我的 datepicker 与 redux 表单兼容，代码在这里：

<DatePicker
  customInput={<CustomDateInputNew {...props} />}
  onChange={date => {
    props.input.onChange(date ? formatValueToState(date) : "");
    if (props.onSelect) {
      props.onSelect(date);
    }
  }}
  dateFormat="DD/MM/YYYY"
  openToDate={props.openToDate}
  selected={
    props.input.value ? parseStateToValue(props.input.value) : undefined
  }
  filterDate={day => isDateUnavailable(day, props.availability)}
  locale={moment.locale("en-gb")} //sets monday first day of week
/>

filterDate 函数显示为启用包含在数组中的日期，她的实现是这样的：

export const isDateUnavailable = (day, daysArray) => {
  if (!days) {
    return true;
  }
  return days.filter(item => moment(item).isSame(day)).length > 0;
};

其中 days 是一个格式为 ['2018-09-09'] 的数组。此日期选择器将显示此数组中包含的日期。单击后 tw0 或 3 秒后出现的日期选择器出现问题。为什么会这样？是否有其他人面临相同或相对的问题？与filterDates有关吗？谢谢！

4

2 回答 2

2

您的isDateUnavailable功能非常繁重，因此我可以想象，在所有可能的日期运行日期选择器时，它需要 2-3 秒才能初始化。

我认为最好将日期选择器提供props.availability为您希望能够选择的日期，而不是使用includeDates道具。

例子

class Example extends React.Component {
  render() {
    return (
      <DatePicker
        includeDates={[
          moment("2018-09-09"),
          moment("2018-09-09").subtract(1, "days")
        ]}
      />
    );
  }
}
于 2018-07-03T21:24:22.460 回答
1

我同意isDateUnavailable沉重。

你可以让它更轻，看看会发生什么。

export const checkAvailability = (availableDays) => 
  (!availableDays) 
  ? () => true // If the array is empty, just create a function which returns always true!
  : (currentDay) => 
    availableDays.filter(
      dayString => dayString === currentDay.format('YYYY-MM-DD')
    ).lenght > 0;

并像这样使用它

filterDate={checkAvailability(props.availability)}

基本上，它不是从 days 数组中的每个项目创建一个时刻对象，它只是将日期（来自 datepicker）格式化为您的格式。然后它比较字符串（应该更快！）。

于 2018-07-03T21:37:56.327 回答