I'm wondering how could I prevent a user from selecting dates above today's date. For example, today is 3.7 so let's that be the highest end date user could select.
<DateRangePicker
startDate={this.state.startDate}
startDateId="startDate"
endDate={this.state.endDate}
endDateId="endDate"
onDatesChange={({ startDate, endDate }) => {
this.setState({ startDate, endDate }, () => {});
}}
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
daySize={50}
noBorder={true}
isOutsideRange={() => false}
/>
I had a similar issue on another react date picker package. After a bit of reading the documentation for yours (the AirBnb one) I was able to find this issue being mentionned on their GitHub: Set date range #86
It appears there is a prop called
isOutsideRange
that takes a function. You could returnfalse
for any date outside of the current date for example, with just a comparison.Hope it helps
You should use an
isOutsideRange
prop and Moment.js for working with available dates ranges. For example, you can allow selecting only dates within a past 30 days this way:CodeSandbox