search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.2k forks source link

[DateRangePicker] Add `maxRange` prop #8868

Open TiagoPortfolio opened 1 year ago

TiagoPortfolio commented 1 year ago

Duplicates

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.

Screenshot 2023-05-04 at 16 21 29

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 commented 1 year ago

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)}