Strange UI for DateRange when scrolling months

Open isabellachen opened this issue 11 months ago • 1 comments

The behaviour of the dateRange picker when used with the months scroller is a bit unintuitive.

Steps to reproduce

Select start date (eg. 28 Feb 2024)
Scroll to subsequent month (eg. March)
The hove-range highlight is applied by default for all the days in March from day 1 to day 28

Is there a way to only trigger the hover range highlight (ie the class react-datepicker__day--in-selecting-range) only when the user move the cursor over the days on the calendar and not when the user scrolls the month?

https://github.com/user-attachments/assets/db4189fb-282e-4257-8cfc-8d71a47ca39c

Jan 27 '25 06:01 isabellachen

Hi,

This is happening because by default, react-datepicker will pre-select a day for the keyboard navigation, it'll be the same date as you select for the start date (when the end date is not yet selected), that's why the range selector style is getting applied till the keyboard selected date. You can test this by using arrow keys and notice the highlighted dates modification.

Jul 13 '25 05:07 SaiBalaji202