changeMonth in custom header is inconsistent based on last selected date #3829
Description
Describe the bug
When you use the "changeMonth" function in a custom header, the actual month that gets selected is different dependent on the last date you clicked on. This seems to be happening when you use react-datepicker with monthsShown >= 2.
To Reproduce
I copied the below from the example docs ("Custom header with two months displayed" section) with small changes (adding a "Jump to June" button which calls changeMonth(5)). Try the following:
- Click on the "Jump to June" button. It changes the display to show June on the left and July on the right. This seems correct.
- Then click some day in July and reopen the calendar.
- Then click the button again. The display is May on the left and June on the right. It seems react-datepicker is doing some implicit offset that makes it impossible to control which month gets displayed by passing in a target value. Now I'm trying to get June to be on the left by calling
changeMonth(5)again but it won't happen. The offset seems to get worse the more calendars I put on the screen.
The only workaround seems to be some hack where I keep track of the last month I clicked and write some offset logic to fix the bug myself.
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
renderCustomHeader={({
monthDate,
customHeaderCount,
decreaseMonth,
increaseMonth,
changeMonth
}) => (
<div>
<button
aria-label="Previous Month"
className={
"react-datepicker__navigation react-datepicker__navigation--previous"
}
style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
onClick={decreaseMonth}
>
<span
className={
"react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
}
>
{"<"}
</span>
</button>
<button onClick={() => {changeMonth(5)}}>Jump to June</button>
<span
className="react-datepicker__current-month">
{monthDate.toLocaleString("en-US", {
month: "long",
year: "numeric",
})}
</span>
<button
aria-label="Next Month"
className={
"react-datepicker__navigation react-datepicker__navigation--next"
}
style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
onClick={increaseMonth}
>
<span
className={
"react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
}
>
{">"}
</span>
</button>
</div>
)}
selected={startDate}
onChange={(date) => setStartDate(date)}
monthsShown={2}
/>
);
};Expected behavior
Calling changeMonth(5) should always put June on the left. Jumping to a month, when in a sequence of calendars, should have a consistent defintion of what changing a month means.
Screenshots
- Open the calendar.
- Click the "jump to June" button
- Click a day in July
- Click the "jump to June" button again. Observe how June is now on the right and not the left, and July is no longer visible.
Desktop (please complete the following information):
- OS: Windows
- Browser: all browsers
- Version: latest
Smartphone (please complete the following information):
- Device: N/A
- OS: N/A
- Browser N/A
- Version N/A
Additional context
N/A