Disable all future days in React-Day-Picker?

Question

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

Related: https://github.com/gpbl/react-day-picker/issues/644 — vsync, Sep 29 '18 at 18:16

score 8 · Answer 1 · answered Mar 12 '18 at 15:33

8

A slightly better version is

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

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

answered Mar 12 '18 at 15:33

gpbl

4,721
5
31
45

Is it possible we add double after ? – Eko Bayu Jul 15 '19 at 08:59
1

ah I found it, `disabledDays: [ { after: new Date(moment()) }, { after: to } ]` – Eko Bayu Jul 15 '19 at 09:21

score 5 · Accepted Answer · answered Mar 08 '18 at 23:26

5

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())}

answered Mar 08 '18 at 23:26

Anthony

6,422
2
17
34

Ivan Kobzar · Answer 3 · 2022-06-27T19:54:56.207

1

You can use:

<DayPicker
        toDate={new Date()}
    />

More info: https://react-day-picker.js.org/basics/navigation#between-months-or-dates

edited Jun 27 '22 at 19:54

answered Jun 27 '22 at 14:08

Ivan Kobzar

21
2

This should be the chosen answer. Solves it elegantly. – Or Nakash Apr 09 '23 at 11:27

score 0 · Answer 4 · answered Sep 28 '21 at 06:48

The below code will be useful to disable,

selected future days

disable all days before the current day

weekends (Saturdays and Sundays)

Way 1:

The API response is an array of objects.

import DayPicker from "react-day-picker";
import moment from "moment";
import "react-day-picker/lib/style.css";

const selectedDaysToDisable = [];

const arr = [
    { id: 1, date: "Sep 28 2021 10:00:00 AM" },
    { id: 2, date: "Sep 29 2021 08:00:00 AM" },
    { id: 3, date: "Oct 5 2021 08:00:00 AM" }
  ];

arr.map((val) => {
    return selectedDaysToDisable.push(dateFormat(val.date));
});

function dateFormat(date) {
    return new Date(
        moment(date).format("MM") +
        "/" +
        moment(date).format("DD") +
        "/" +
        moment(date).format("YYYY")
    );
  }

<DayPicker
 disabledDays={[
      { before: new Date() },
      { daysOfWeek: [0, 6] },
      ...selectedDaysToDisable
    ]}
/>

Way 2:

For simple understanding.

const selectedDaysToDisable = [new Date(2021, 8, 28), new Date(2021, 8, 23), new Date(2021, 8, 29)];
<DayPicker
    disabledDays={[
        { before: new Date() },
        { daysOfWeek: [0, 6] },
        ...selectedDaysToDisable
    ]}
/>

Disable all future days in React-Day-Picker?

4 Answers4