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/
4.57k stars 1.34k forks source link

[pickers] Disable range modification on `DateRangeCalendar` when `selectionState === 'finish'` #11706

Open ahellam opened 10 months ago

ahellam commented 10 months ago

Summary

Current Behavior: The calendar has a feature where it previews a potential range selection. The rangePosition prop determines whether the calendar is previewing a new start date or a new end date. Once a range is selected (selectionState === 'finish'), the calendar rangePosition switches to 'start and continues to preview potential new startDate extensions of the range when hovering over new dates.

Desired Behavior: What I'd like to achieve is that once a date range has been selected (selectionState === 'finish'), the previewing feature gets turned off. Hovering over new dates should not show them as part of the existing range. The next click on a date should start a new range selection process, with the clicked date as the new startDate and an empty endDate.

Examples

No response

Motivation

No response

Search keywords: isPreviewing, rangePosition and selectionState Order ID: 78587

michelengelen commented 10 months ago

This is currently not possible with our Calendar, or am I missing something @LukasTy?

Shall we put this on our board to discuss and estimate?

LukasTy commented 10 months ago

I can confirm that this is currently not possible. We show a preview range when the @media (pointer: fine) matches and this can not be configured in any way. Currently, there is also no option to disable the behavior of extending or reducing the selected range when selecting dates.

IMHO, it makes sense to have such behavior controllable. 👍

Could you confirm, that having the option to turn off the feature where we allow extending or reducing the range when a value is present (in turn the previewing would also not be shown) would cover your use case?

ahellam commented 10 months ago

Thank you for the quick response. I was able to handle setting the start/end date with state and hiding the preview (range extension) with CSS.

LukasTy commented 10 months ago

@ahellam Could you please clarify if by any chance this issue and https://github.com/mui/mui-x/issues/11756 are related and were created by you trying to achieve your desired result? If it is correct, could you clarify more details and correct me if I'm wrong about the desired result:

  1. You want the option to have a way to select a variable range (1 week, 2 weeks, 10 days, etc.).
  2. You would prefer for this selection to function as a "week picker", i.e. no need to select the start and end date, but the selection is locked to a set period. Or would you need to have a range that can be X long, but start on whichever day users choose?
  3. In this case you'd like the option of range modification to not exist - re-selecting a value means selecting a new range.
ahellam commented 10 months ago

@LukasTy This is is a separate issue and not related. https://i.gyazo.com/906f1cf5554e8ec344ad4bf8d056e5c4.gif Gif is from https://mui.com/x/react-date-pickers/date-range-calendar/

For this issue I am using logic in the handleChange to check if a start & end range exists and if so, the next click sets the startDate and sets the end date to null.

I am hiding the css for that start date range extension preview on https://github.com/mui/mui-x/issues/11756 as well though.