React-dates: Question: Disable future dates?

[NickCain]

Hi,

I was wondering would it be possible to disable dates in the future on the calendar?

For example, I have a annual schedule of dates which need to be disabled, is there a way for React Dates to consume this dates and disable the corresponding date.

Thanks in advance.

[majapw]

Hi @NickCain, sure! There are two props that could help you with this. If you have an array of blocked dates (which is what it seems like), you could use the isDayBlocked prop. This prop is a function that takes in a moment object and returns true or false based on whether you want it to be selectable. So for examples you could do something like this:

const BAD_DATES = [moment(), moment().add(10, 'days')];
const isDayBlocked = day => BAD_DATES.filter(d => d.isSame(day, 'day')).length > 0;
return (
  <DateRangePicker
    isDayBlocked={isDayBlocked}
    ...
  />
);

Note that while blocked days cannot be selected, they can still be included in ranges.

You could also explore using the isOutsideRange prop which functions similarly but is more designed to block out everything before and/or after a certain date.

Does that help?

[NickCain]

Hi @majapw,

Thanks for for your reply.

Yes! this looks like what I wanted to do! Thank you!

[spiral2k]

there is an option to not accept the range select if there is blocked day in the range?

[ybakhshi]

@NickCain did you implement this? are you using react-datepicker?
Because currently react-datepicker is using date-fns not moment. I tried to use the code from @majapw but it didn't work for me.

Could you please help me here

[NickCain]

Hi @ybakhshi ,

It was a long time ago, but from what I remember this did work at the time, however I'm not sure now as there may of been some updates that have made by the lib owner.

I did import moment separately so I would suggest doing this and then the example should work, moment is just used as a helper here to format the dates needed.

[ybakhshi]

@NickCain Thanks for your kind reply . i solved it using the excludeDates ={disableFullyBookedDates()} .

in case someone needs it

moment is not supported anymore with react-datepicker. There is another dependency used :
import { getDay, addDays} from 'date-fns';

[NickCain]

@ybakhshi - Glad you sorted it, I did suspect something may of changed in react-datepicker. itself.

[moosefaceee]

@ybakhshi I'm confused, is this thread not on react-dates?