RangePicker: choose which months are displayed on calendars

[Maktel]

• 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.

[zombieJ]

Hmmm...Make sense. Since we have plan to redesign the series of DataPicker component. It may not accept new api of it. But i think it's OK to show enabled month by default.

cc @afc163 @ztplz

[afc163]

There is defaultPickerValue now, we can make it controlled.

[afc163]

#10402

[arash-kiani-cko]

wonder if it's just me but I couldn't get defaultPickerValue to work on RangePicker 🤔

[AmazingCaddy]

wonder if it's just me but I couldn't get defaultPickerValue to work on RangePicker 🤔

@arash-kiani-cko below is how I use defaultPickerValue, may it help you.

<template>
  <a-range-picker :defaultPickerValue="dateRange" />
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      dateRange: [moment().add(-1, 'month'), moment()],
    }
  },
}
</script>

[Balderrama]

it doesn't work can anybody help me, please?
the defaultPickerValue only works when it's initialized but i need to always show the months that are selected on the calendar

[Balderrama]

step 1:
I select the range of dates
let's say i selected 11/10/2019 - 11/13/2019 // MM-DD-YYYY

step 2:
if i open the calendar and navigate through it and change the month, let's say i moved to september and without select any date i close the calendar.

step 3:
If i open again the calendar it shows the month of september instead of show november which is the date i have selected.

To sum up based on the range of dates selected i need to show those months when i open the calendar

thanks in advance.

[AnishLushte07]

Hi guys,

@Maktel @afc163

I am facing issue with Range Picker. I wanted to show previous month and current month in rangePicker, I'm able to do that with defaultPickerValue. But the issue is when i select start date from picker. Range picker gets reset to current month and next month. can anyone please help. Thanks in advance!

Eg:
Current date: 28-July-2020
deafulatPickerValue: [ 28-06-2020, 28-07-2020]
Range picker shows June for first card and July for second (Works as expected)
User select Date from first card (June date), after selection Range picker show start month (July) and end month (August)

[nirinel]

Hi guys,

@Maktel @afc163

I am facing issue with Range Picker. I wanted to show previous month and current month in rangePicker, I'm able to do that with defaultPickerValue. But the issue is when i select start date from picker. Range picker gets reset to current month and next month. can anyone please help. Thanks in advance!

Eg:
Current date: 28-July-2020
deafulatPickerValue: [ 28-06-2020, 28-07-2020]
Range picker shows June for first card and July for second (Works as expected)
User select Date from first card (June date), after selection Range picker show start month (July) and end month (August)

Facing the same issue myself. Using defaultPickerValue, shows the desired months on initial load. But when I open and change anything it resorts to showing the current month and the one after.
Anyone had any luck with this?

[randdusing]

I'm facing the same issue. Once I choose the start date, it automatically "focuses" to the end date ignoring any values set in defaultPickerValue.

1. Assume the start and end dates are currently 2021-01-01
2. Open picker to select start date
3. Click previous month 12 times
4. Select 2020-01-01
5. My code sets defaultPickerValue to [2020-01-01, 2020-01-01]
6. Panel now "focuses" back to 2021-01-01 for choosing the start date

Now I have click previous month 12 times again to select 2020-01-01 as the end date too

It seems like we need a pickerValue rather than just defaultPickerValue

[nirinel]

Is there any workaround for this?

[e965]

@afc163 @zombieJ is there any progress with this issue? In my application, I also faced the situation that I do not need the current and next, but the past and current months, and there is no adequate way to do this.

[DercilioFontes]

Same issue here. I have some tests using it, and some days work, another days it fails because of that issue.

[Kestutis]

to prevent month to jump use same date in start/end , ex. const defaultPickerValue = [moment('2021-11-01'), moment('2021-11-01')], or set just one date so it won't move when first date is selected, ex. const defaultPickerValue = [moment('2021-11-01'), undefined].

[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.

[zombieJ]

Picker component has been refactor in 5.14.0, and this issue is discussed and handled with react-component/picker#691 which will be marked as closed.

Please feel free to create new issue if you have any further question :)

Picker 组件于 5.14.0 版本进行了重构，此问题已被 react-component/picker#691 中进行讨论与处理。

如果有任何问题，欢迎随时创建新的 issue :)