React-datepicker is opening with delay onClick

Question

i'm facing a strange issue with react-datepicker. I've made my datepicker compatible with redux form and the code is here:

<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
/>

The filterDate function show as enable the dates that are contained inside an array and her implemantation is this:

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

where days is an array with the format ['2018-09-09']. This datepicker will show the dates that contained inside this array. I'm facing and issue with the datepicker appearing after tw0 or three seconds after clicking. Why is this happening? Does any other face the same or a relative issue? Is it something with the filterDates?? Thanks!

Answer 1

Your isDateUnavailable function is pretty heavy, so I can image it taking 2-3 seconds for the date picker to initialize when running that on all potential dates.

I think it would be better to give the date picker your props.availability array as dates you would like to be able to select instead, with the includeDates prop.

Example

class Example extends React.Component {
  render() {
    return (
      <DatePicker
        includeDates={[
          moment("2018-09-09"),
          moment("2018-09-09").subtract(1, "days")
        ]}
      />
    );
  }
}