RangePicker: choose which months are displayed on calendars

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

What problem does this feature solve?

We develop an application that is used for financial bookkeeping and use RangePickers to filter past operations. Our use case focuses on dates in the past, and since filtering for the future makes no sense, we disable these dates using disabledDate property of RangePicker. A simplified example of the disabling logic:

disabledDate={currentDate => currentDate.isAfter(moment())}

By default, when RangePicker has value set to a single day or the date range fits on the same month, the value is displayed on the left calendar and right calendar displays the following month – this setting is controlled by showDate variable in component’s state. But since we disable future dates, the following month is always disabled in our pickers:

It would make much more sense in out case to be able to decide which month is displayed by default on which side, so that the user by default sees this:

We believe the use case is universal enough to make into the library – it can be used to guide the user to pick the date range in the very specific month and be complemented by a advanced date disabling logic. Other solutions like predefined date ranges do not solve it for us and we do not want to maintain internal fork of a entire library for a simple change like this.

What does the proposed API look like?

We tried different approaches and the simplest and most obvious seems to be the most effective: allow replacing the logic of the getShowDateFromValue function with function from component props.

Suggested changes:

replace every occurrence of getShowDateFromValue(value) || showDate and derivatives inside the class component (like here and here) with method call:

class RangePicker extends React.Component<any, RangePickerState> {
  // ...
  getShowDate = (value: RangePickerValue, previousValue: RangePickerValue) => {
    let showDate = null;
    if ('getCustomShowDate' in this.props) {
      showDate = this.props.getCustomShowDate(value);
    } else {
      showDate = getShowDateFromValue(value) || previousValue;
    }
    return showDate;
  }
  // ...
}

So I propose to add a property

getCustomShowDate(value: RangePickerValue) => RangePickerValue

to DatePicker.RangePicker component.

If you approve of the suggestion, I can send a pull request with implementation.

[Bosseskompis]

I would also like this feature. As others have pointed out, using defaultPickerValue only works for the initial rendering, but we need a way to update it based on selected dates.

[someone635]

Faced this issue, found a quick and easy hack to sidestep it temporarily:

const [key, setKey] = useState("1");

useEffect(
    ()=>{
        setKey(key === "1" ? "2" : "1")
    },
    [someDate.getTime(), someOtherDate.getTime()]
)

)
<RangePicker
                key={key}
                defaultPickerValue={[someDate, someOtherDate]}
                ...
            />

Now every time any of the defaultPickerValues change the react key is changed, remounting the component from scratch. Meaning defaultPickerValue will be used every time it remounts, acting somewhat like a controlled component. Not optimal perfornance-wise for sure, but gets the job done.