React-dates: Can I select only past dates?

Created on 9 Dec 2016  ·  11Comments  ·  Source: airbnb/react-dates

By using isOutsideRange={() => false} I enabled all past dates. Now I need something like isInsideRange={() => true} to disable all future dates. Does it exist some built in method to disable future dates?
If not, can somebody advise, how can I use isDayBlocked method to block all future dates?
Thanks.

question

Most helpful comment

isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}

All 11 comments

isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}

I get Uncaught ReferenceError: isInclusivelyBeforeDay is not defined

@winterblack like anything else, you need to import that function to be able to use it. import { isInclusivelyBeforeDay } from 'react-dates'; should suffice.

how can I enable dates of last 30 days?

Hi @mrmuhammadali, if you want to enable only the last thirty days, you could use isOutsideRange as follows:

isOutsideRange={(day) => day.isBefore(moment()) && day.isAfter(moment().subtract(1, 'month))}

I'd recommend setting initialVisibleMonth to moment().subtract(1, 'month') in that case as well. There are some optimizations you could do (caching moment() for instance), but that's the general gist.

Hi @majapw, I tried your code but it enables every other date except for last 30 days. :(

Then just flip the boolean?

On Thu, Sep 14, 2017, 8:16 AM Muhammad Ali notifications@github.com wrote:

Hi @majapw https://github.com/majapw, I tried your code but it enables
every other date except for last 30 days. :(


You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/209#issuecomment-329463967,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtTOLxi-7GrVm9NHf69wDmJv_eU5eks5siRkvgaJpZM4LJAhC
.

I tried this: isOutsideRange={(day) => day.isAfter(moment()) || day.isBefore(moment().subtract(30, 'days'))} and it is now enabling dates of last 30 days only.
Thanks 👍

just wanted to contribute to this thread as it helped me... I am using the following code to limit selection to the last 30 days, and exclude the future as well... if you see a problem or way I could upgrade it, lemme know 👍

isOutsideRange={day =>
    !day.isAfter(moment().subtract(1, "month")) ||
    !isInclusivelyBeforeDay(day, moment())
}

Is there a way to disabled specific dates? Say I have a series of dates which can be apart by a few days (20, 24, 30), how do I go about disabling them in the datepicker?

Is there a way to disable the current date like(today)? Does it exist some built in method to disable

Was this page helpful?
0 / 5 - 0 ratings