[DateRangePicker] Add maxRange prop

[TiagoPortfolio]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The DateRangePicker accepts the minDate and maxDate props but if you want to control these props based on the selected start or end dates, it can be difficult.
I think for the DateRangePicker component it would make sense to add a maxRange props which accepts the max range of days accepted.

Examples 🌈

For instance, if in the start date the user selects 04/05/2023 and the maxRange is 10, the DateRangePicker should only allow selecting an end date until 14/05/2023.
When the date picker is closed and opened again, the limits should be reset so the user can set a new date out of the current limits and the new limit should be calculated based on that new date.

If I want to select a new date after the max limit defined based on the currently selected date, I can't because it is disabled. It is annoying that I have to clear the date, which causes the date picker to close again, open the date picker and select the new date freely.

Motivation 🔦

Allow a maxRange to avoid creating a fully controllable DateRangePicker to also control the minDate and maxDate props.

Order ID 💳 (optional)

54728

[alexfauquette]

Sounds like a nice idea.

Since the date range validation might always depend on the current state, we could support callback for validation props, such that this issue could be solved by maxDate={currentValue => currentValue[0] === null ? null : currentValue[0].addDays(5)}