react-datepicker
react-datepicker copied to clipboard
Hacker0x01
Range is highlighted up to selected date in other months.
Describe the bug I have a calendar with a 2 month layout, the issue is that when I select a date and then move to another month, the dates are highlighted up to the current selected date.
To Reproduce Steps to reproduce the behaviour:
Assuming the calendar opens on months September and October:
- Click the start date, choosing 8th in the example
- Click the arrow top right to move to another month
- See that the dates 1st - 8th are highlighted as "in range"
Expected behaviour I expect the days to have no highlight whatsoever until I start interacting. When hovering, I expect the in range highlight to show up to the date I'm hovering over.
Screenshots A GIF of what I'm experiencing: https://i.imgur.com/zsqKKFF.gif
In the GIF, you can see the in range highlight works as expected when hovering, no dates are highlighted as in range past where I'm hovering. When I click to the next month, you can see that the dates 1st - 8th are highlighted as in range, even though that's not the case.
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Chrome
- Version: 116.0.5845.180 (Official Build) (64-bit)
Additional context
I've tried to style this with CSS, I found a post about using a CSS class .react-datepicker__day--outside-month but this class isn't on these dates. The classes on these dates are react-datepicker__day react-datepicker__day--001 react-datepicker__day--in-selecting-range react-datepicker__day--weekend. As far as I can tell, there's no way for me to style just these dates.
If required, I can provide an example link of this, though I would need to do this privately. Also happy to show the behaviour on a call if it helps.
We are facing similar issues. When a date range is selected it highlights dates from the previous month from the start date. This issue is only in recent versions
Same issue here, and came to the same conclusion, the css classes required to "bypass" it via custom styling isn't available by the looks of it.
OS: MacOS Ventura, Browser: Firefox
I'll disable the range for now and hopefully it'll be fixed in the future
I have the same problem too. Seems like the same classes are being applied for the in-range/range-end in the other month :/.
Im also facing this issue. Does anyone know which version introduced this issue?
found a couple workarounds, but one of them blocks you from using minDate https://github.com/Hacker0x01/react-datepicker/issues/2930#issuecomment-1068580469 https://github.com/Hacker0x01/react-datepicker/issues/2930#issuecomment-853863569
I'm pretty surprised that this issue exists for long time..
Found a workaround for this problem, link below:
https://github.com/Hacker0x01/react-datepicker/issues/2930#issuecomment-2307645721
