[pickers][DateRangePicker] Separately disable start and end date picking

[kbrueckner]

Summary

I am looking for a feature where it is possible to freeze selected values for start and end date. Means a start or end date cannot be changed. This shall be possible independently, thus disable on DAteRangePicker itself wouldn ot work, since it disabled edition completely for start and end date at the same time.

Examples

No response

Motivation

In some projects I have the following use case:
Definition of settings which apply to a selected date range. Once the start date of the range is reached or in the past it shall not be possible to update the start date anymore while the end date shall still be editable until that one is in the past as well.

Search keywords: daterangepicker disable

[LukasTy]

Hello @kbrueckner, have you tried using the shouldDisableDate callback prop?

It receives the position argument that can be used to disable dates based on the selected range position, i.e.:

(day, position) => {
  if (value[0] && position === 'start' && day.isBefore(value[0])) {
    return true;
  }
  return false;
}

[kbrueckner]

Yes, I considered that and tried a lot of things with different provided attributes of DateRangePicker.
The problem is that it doesn't give a full blown solution with nice UX.

The one you suggested - if I am not mistaking - would simply disable a specific date in the calendar but it does not prevent from setting the from date to another date which is not disabled.

[LukasTy]

The one you suggested - if I am not mistaking - would simply disable a specific date in the calendar but it does not prevent from setting the from date to another date which is not disabled.

Do you mean setting the date in the input?
Are validation errors and form submission blocking not an option in your use case? 🤔

If not, it seems like you are talking about the following requirement: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date (year is disabled in input given present validation rules).
Such enhancement could be possible, but only in the new accessible DOM behavior.
Could you confirm if this is the behavior you need? 🤔

[kbrueckner]

Uploading a screenshot to explain the expected behaviour:

If start date is configured to be fixed/not editable the input field shall be disabled. Whenever you open the calendar widget i.e. by editing the the end date the start date (in the screenshot June 19) shall be fixed. It shall not be possible to move the start date to earlier or later while the end date can still be updated/moved. the selected range nevertheless shall still be in the light highlight color.

In addition it shall also be possible to set the end date fixed while keeping the start date updateable.

With the current control attributes I can achieve to set the start date input field disabled but it can still be updated via the calendar widget unfortunately.