Make all dates except for certain ones disabled

Question

I am trying to make it so that in react-day-picker, only the dates that are available are selectable (i.e. A user is only available for two days, all those other days are disabled and unselectable). I've tried doing this method:

    <DayPicker
      selectedDays={this.state.selectedDays}
      onDayClick={this.handleDayClick}
      disabledDays={(day => (day !== ServiceRequestEngagementCreateModal.availableDates(service.available_dates)))}
    />

But that makes all of the dates unavailable.

Any help would be appreciated, thanks!

score 1 · Accepted Answer · answered Jan 30 '19 at 22:41

I figured it out. Heres the code we ended up using

render() {
const availableDateStrings = service.available_dates.map(date => new Date(date.split('-').join(',')).toDateString())
return(
...
<DayPicker
              selectedDays={this.state.selectedDays}
              onDayClick={this.handleDayClick}
              disabledDays={(day => (availableDateStrings.indexOf(day.toDateString()) === -1))}
            />
...
)}

Make all dates except for certain ones disabled

1 Answers1