1

I have a DayPickerInput element from react-day-picker plugin and I don't know how to disable all days after a month(31 days) starting with current day. Any help please?

Thanks.

Siv
  • 193
  • 2
  • 16

1 Answers1

3

The documentation could be a clearer. This should do it for you:

<DayPickerInput
    value={moment(minDate).format('YYYY-MM-DD')}
    dayPickerProps={{
        disabledDays: {
            after: new Date(2018, 3, 20),
        },
    }}
    onDayChange={day => console.log(day)}
/>

Replace the new Date(y, m, d) with your date.

[Edit per my comment]

Not all months are 31 days, if you literally want to add 31 days to the first of a month:

Source: Add day(s) to a Date object

var myDate = new Date();
myDate.setDate(myDate.getDate() + AddDaysHere);

Where "AddDaysHere" would be 31.

If you just want to insure there is no way to select a date next month, you could:

// There is probably a billion better ways to get the next available month, this is just basic
let currentMonth = 2;
let nextMonth = currentMonth + 1;
if (nextMonth > 11) { nextMonth = 0;} // I believe javascript months start at 0.

Date(2018, nextMonth, 1)

Happy coding!

Nick DuBois
  • 31
  • 3
  • You could use `new Date()` with no arguments to get the current time from the client system clock and client timezone. – Håken Lid Oct 17 '18 at 17:02
  • @Nick DuBois thanks for your response, I checked also the documentation but my problem is that I don't know how to compute dynamically the date for 'after' statement, let's say disable all dates after 30days starting from current day. – Siv Oct 21 '18 at 13:53
  • Thank you so much - i was struggling with this issue and had no idea that the props wouldn't populate further down into daypicker from daypickerinput - they really should update their documentation – AC007 Sep 29 '20 at 08:01