Describe the bug
The calendar doesn't display the startDate as first month if monthsShown={2} and selectsRange is set.
To Reproduce
Steps to reproduce the behavior:
Example:
const SelectRangeIssueWith2Months = () => {
const [startDate, setStartDate] = useState<Date | null>(new Date());
const [endDate, setEndDate] = useState<Date | null>(null);
const onChange = (dates: [Date | null, Date | null]) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};
return (
<DatePicker
selected={startDate}
onChange={onChange}
startDate={startDate}
endDate={endDate}
selectsRange
monthsShown={2}
/>
);
};
render(SelectRangeIssueWith2Months);
- Go to input field and select end date
- Click outside
- Click into input field
Expected behavior
The calendar display the startDate as first month.
Screenshots
The calendar display the startDate in second month as if showPreviousMonths would be set.
Desktop:
- OS: MacOS
- Browser: chrome
- Version 1.4.1
- react-datepicker version: 8.7.0
Additional context
As a workaround the issue can be fixed by setting the focusSelectedMonth prop. But this introduces another behaviour of the calendar component - selected month is focused (directly set as first month) during user input.
Describe the bug
The calendar doesn't display the
startDateas first month ifmonthsShown={2}andselectsRangeis set.To Reproduce
Steps to reproduce the behavior:
Example:
Expected behavior
The calendar display the
startDateas first month.Screenshots
The calendar display the
startDatein second month as ifshowPreviousMonthswould be set.Desktop:
Additional context
As a workaround the issue can be fixed by setting the
focusSelectedMonthprop. But this introduces another behaviour of the calendar component - selected month is focused (directly set as first month) during user input.