Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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}
      />
like image 782
micahblu Avatar asked Sep 17 '25 15:09

micahblu


1 Answers

A slightly better version is

const today = new Date();
<DayPicker
  disabledDays={{ after: today }}
  selectedDays={new Date()}
/>

Example: https://codesandbox.io/s/l942z0w9y9

like image 67
gpbl Avatar answered Sep 19 '25 08:09

gpbl