DateRange still has functioning navigation buttons outside of min/max dates

[rlkeyer]

🚀 Feature request

Current Behavior

When using the min and max props for DateRange, the user can still click the next and prev month buttons to travel as far forward or backward as they want, even if the dates are greyed out.

Desired Behavior

Would like to see an option whether by default or with a prop where the next and prev month navigation buttons disappear or are disabled when the user reaches the min/max date specified in the min/max props.

Suggested Solution

A possible solution I thought of would be to track the months that are currently being viewed in state and update the state using the onPrevMonthClick and onNextMonthClick props. From here you could pass functions to navNext and navPrev props to decide whether or not to display the navigation buttons. (ex. if the month currently being viewed is the same as the month from the max date, don't display the next button)

const showNextButton = () => {
  if (pickerDate.isSameOrAfter(moment(), 'month')) {
    return <div />
  }
  return null
}

This function that could be passed to navNext replaces the next button with an empty div if you have reached the same month as the max date, and otherwise does not change the next button.

Who does this impact? Who is this for?

People using min and max props for DateRange.

Describe alternatives you've considered

Briefly considered trying to add some sort of message or tooltip when the user hovered a date outside the specified range, but decided that would probably still be confusing for a user if they could press the prev nav button and go back without a limit.

[chrishavekost]

@rlkeyer the min and max props inside DateRange are used for the isOutsideRange function that only calculates if you're able to select a certain date

availity-react/packages/date/src/DateRange.js

Line 326 in 0896bab

isOutsideRange={isOutsideRange(min, max, format)}

To disable the navigation buttons I believe you just need to pass in minDate and maxDate values to the DateRangePicker

availity-react/packages/date/src/DateRange.js

Line 313 in 0896bab

{...datepickerProps}

Something like

datepickerProps = {
  minDate: min,
  maxDate: max
}

should work

http://airbnb.io/react-dates/?path=/story/daypickerrangecontroller--with-navigation-blocked-mindate-and-maxdate

[rlkeyer]

Wow ok I'm not sure how I missed those props I was trying to find anything that could do it so thanks for pointing those out. It seems to work in most cases, but I noticed one instance where it seems to break: Let's say I'm viewing August 2021 and the date range available to the user is 11/01/2019 - 8/12/2021. I have an option to change the year of the dropdown back to 2019, but when I do that it takes me to August 2019 (before the allowed dates) and the next navigation button is still blocked. I assume the dropdowns are a wrapper built on top of react-dates? It seems like maybe they are overriding the functionality provided by minDate and maxDate. Adding some screenshots below to attempt to illustrate a bit better.

initial opening of the date picker shows the next button blocked as expected

Select 2019 from the year dropdown

calendar navigates to 08/2019, which is before the allowed timeframe, but the next navigation button is still blocked

react-dates seems to use the onNextMonthClick props to enable/disable the nav buttons so I think when the dropdown changes the month that function doesn't get called. Not sure if that is something we would want to try to create a workaround for.

[chrishavekost]

Hey @rlkeyer it looks like this issue is related to what you're describing: react-dates/react-dates#2139

It looks like when we select a month from the dropdown, onMonthSelect is called to update to the new value https://github.com/airbnb/react-dates/blob/6c2cb61c5e876fbdac72e6efed49c0bd64f06d6b/src/components/CalendarMonthGrid.jsx#L207-L218

Then onMonthChange gets called to update state https://github.com/airbnb/react-dates/blob/6c2cb61c5e876fbdac72e6efed49c0bd64f06d6b/src/components/DayPickerSingleDateController.jsx#L473-L487

Judging from onNextMonthClick and onPrevMonthClick functions, we probably want onMonthChange and onYearChange to set the state of disablePrev and disableNext too https://github.com/airbnb/react-dates/blob/6c2cb61c5e876fbdac72e6efed49c0bd64f06d6b/src/components/DayPickerSingleDateController.jsx#L409-L471

This lines up with what you said, but instead of us creating our own workaround we can open a PR to them fixing this issue, what do you think?