React-dates: How To enable past dates and prevent futures date fields in calendar.

[prasanthyejje]

i am using DateRangePicker. and i dont know how to prevent future dates. also i am little bit confusing while looking at docs. could you help me @airbnbelena

this piece of code i am using now ..

                              <DateRangePicker
                                    startDate={this.state.startDates}
                                    startDateId="startDate"
                                    endDate={this.state.endDates}
                                    endDateId="endDate"
                                    onDatesChange={({ startDate, endDate }) => this.setState({ startDates: 
                                                         startDate, endDates: endDate })}
                                    focusedInput={this.state.focusedInput}
                                    onFocusChange={focusedInput => this.setState({ focusedInput: focusedInput })}
                                    openDirection='down' />

and My Import is :
import { DateRangePicker } from 'react-dates';

[majapw]

Hi @prasanthyejje, you probably want to use the isOutsideRange method. It helps in blocking large ranges of dates at the beginning or end of your calendar. By default it's set to block past dates (https://github.com/airbnb/react-dates/blob/master/src/components/DateRangePicker.jsx#L109):

isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),

You could flip this to block all future dates:

isOutsideRange={day => isAfterDay(day, moment())}

[johnnyfekete]

@prasanthyejje if you have moment imported, add this prop:

isOutsideRange={day => (moment().diff(day) < 0)}

[prasanthyejje]

@majapw And @johnnyfekete thanks for your kind response, and could you tell me to block all past dates from a particular specified day.

[johnnyfekete]

the isOutsideRange function should return true or false. If it's true, then the given day will not be blocked. You can use the day attribute in your method and check if it's blocked or not.

something like this:

isOutsideRange={day => {
   let dayIsBlocked = false;
   if (moment().diff(day) < 0) {
      dayIsBlocked = true;
   }
   ... WRITE YOUR OTHER CONDITIONS, IF THE DATE IS BLOCKED OR NOT
   return isBlocked;  // return true, if the current day is blocked;
}
}

[ConAntonakos]

I tried to do this, but I don't think isAfterDay is properly exposed? Should that something we should change?

I went with isInclusivelyAfterDay(..) && !isSameDay(...), but it would be cleaner with isAfterDay(...).

[jzebgul]

.....
numberOfMonths= {1}
isOutsideRange= {()=> false }
/> add is OutSideRange

[stahlmanDesign]

I tried to do this, but I don't think isAfterDay is properly exposed? Should that something we should change?

I went with isInclusivelyAfterDay(..) && !isSameDay(...), but it would be cleaner with isAfterDay(...).

This is how I access isAfterDay:
import isAfterDay from 'react-dates/lib/utils/isAfterDay'

[ljharb]

Everything reachable is properly exposed by its deep path - the improper way would be to add it to the massive pile of exports in the root.

[evemontalvao]

is there a way to do this without moment? as it's deprecated now

[ljharb]

no, this library requires moment.

Separately, moment is not deprecated at all - the maintainers simply consider it “legacy”. moment can be safely used forever.

Once Temporal (the language proposal) reaches stage 3, this library will drop moment and use Temporal instead.