React-dates: Question: how to disable future days/months

[dgsunesen]

Hi y'all,

I'm working on an app that needs to display some historical data in a graph. I would like to the restrict the user to only be able to choose past days/months. How is this possible here? I see the isOutsideRange but I'm not sure if that's the one to use and how to go on about it.

Best regards
Dan

[majapw]

Hi @dgsunesen!

You can accomplish this by doing:

import { isInclusivelyAfterDay } from 'react-dates';

const today = moment(); // alternatively cache it in the constructor
...

render() {
  return (
    <DateRangePicker
      isOutsideRange={day => isInclusivelyAfterDay(today, day)}
      ...
    />
  );
}

[dgsunesen]

Hmm.. Doesn't seem to work? I am still able to pick dates after today.

[dgsunesen]

Found the "error"... I had to pass in day as the first parameter in isInclusivelyAfterDay

[ConAntonakos]

After attempting this, I believe day and today need to be switched?

isOutsideRange={day => isInclusivelyAfterDay(day, today)}

[timhwang21]

@ConAntonakos Looks right 👍

[c316]

To get this to work I had to do

isOutsideRange={day => isInclusivelyAfterDay(day, moment().add(1, 'days'))}