reactjsreact-day-picker

Disable all future days in React-Day-Picker?


I have a date range calendar using react-day-picker. It works beautifully aside from me not being able to disable "all" future days from the selection. The api docs show that you can enter a single day or multiple days but not all future days?

      <DayPicker
        disabledDays={new Date()} // how to disable all days after today?
        modifiers={{
          sunday: day => day.getDay() === 0,
          firstOfMonth: day => day.getDate() === 1
        }}
        onDayClick={this.handleDayClick}
        onDayMouseEnter={this.handleDayMouseEnter}
      />

Solution

  • It looks like disabledDays prop can also be a function: (day: Date) ⇒ boolean so you should be able to do something like:

    disabledDays={day => day > (new Date())}