Add "Boundaries" to RangePicker (do not accept ranges that include disabled dates)

[rlue]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I'm looking for a way to make sure a whole set of RangePicker inputs don't contain any overlapping dates.

The application asks users to enter, e.g., to list all of their primary residences over the past ten years. The component should be able to impose a restraint like the one below on user input:

# Valid
Sydney Jan 2012–Feb 2012
Berlin Mar 2012–Aug 2016

# Invalid
Sydney Jan 2012–Jun 2019
Berlin Mar 2012–Aug 2016

AFAICT, this is currently impossible with the RangePicker. Please see the CodeSandbox here for an illustration of the problem: today's date is disabled, but it's perfectly valid to select the range spanning from yesterday until tomorrow.

What does the proposed API look like?

function disabledDate(current) {
  return current && stints.some((stint) => current.isBetween(stint.start, stint.end))
}

<DatePicker.RangePicker
  disabledDate={disabledDate}
  boundedByDisabledDates // or hardBoundaries etc.
/>

Or perhaps this should just be the default behavior for disabled dates, and you should have to explicitly allow selections that include them?

[zombieJ]

Your codesandbox is empty.

[rlue]

Whoops! Thought it would save automatically. Should be fixed now.

[rlue]

@afc163, 請注意這個 issue 本來就有重現實例：

AFAICT, this is currently impossible with the RangePicker. Please see the CodeSandbox here for an illustration of the problem: today's date is disabled, but it's perfectly valid to select the range spanning from yesterday until tomorrow.

[zombieJ]

In latest version, disabledDate provides the from date of user selection which can help on the customize boundaries logic:

// Fake Code Sample
<RangePicker
  disabledDate={(date, { from }) => {
    if (!from) return false;

    if (from < 2024-05-05) {
      return date >= 2024-05-05;
    }
    
    return date < 2024-05-05;
  }}
/>

ref demo: https://ant.design/components/date-picker#components-date-picker-demo-select-in-range