search

Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
8.12k stars 2.24k forks source link

Range is highlighted up to selected date in other months. #4239

Open ben-umble opened 1 year ago

ben-umble commented 1 year ago

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:

  1. Click the start date, choosing 8th in the example
  2. Click the arrow top right to move to another month
  3. 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):

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.

CHANDAN145 commented 1 year ago

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

Xikura commented 1 year ago

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

nkabour commented 1 year ago

I have the same problem too. Seems like the same classes are being applied for the in-range/range-end in the other month :/.

paultannenbaum commented 1 year ago

Im also facing this issue. Does anyone know which version introduced this issue?

PavelZhuravlev commented 10 months ago

I have the same.. any workaround?

PavelZhuravlev commented 10 months ago

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

alexjidras commented 9 months ago

4350

laraepcosta commented 3 months ago

Found a workaround for this problem, link below:

https://github.com/Hacker0x01/react-datepicker/issues/2930#issuecomment-2307645721