search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.6k stars 678 forks source link

Month jumping on date selection #441

Closed teksebarna closed 3 years ago

teksebarna commented 3 years ago

Subject of the issue

I'm using DateRangePicker in a Next.js project. There are two months next to each other, let's say January and February. When I select the start date from the second month (February), then it jumps to the left, replacing the first month (January). And on the right, a new month jumps in (March).

[BUG] Bug Reproduce Steps

  1. Go to this demo page.
  2. Select the start date from the second month
  3. Second month jumps to the left You can observe this issue in this video.

[BUG] Expected behavior

Same behavior as on your demo page or in this video. When selecting the start date from the second month: both months stay in place.

Environment

Package Version: 1.1.3 React version: ^16.13.1 Next version: 10.0.6 Node version: 10.23.0 Browser: Chrome 88.0.4324.104

Here are all dependencies from package.json: "dependencies": { "date-fns": "2.16.1", "next": "latest", "react": "^16.13.1", "react-date-range": "1.1.3", "react-dom": "^16.13.1" },

Any help will be kindly appreciated. Thank you!

jjolmo commented 3 years ago

+1! Totally needed this feature! Can't find a way to keep it where it is. Having a prop to set the active month would be better Can't find even a silly workaroud to solve it

Skorpioh commented 3 years ago

+1 here as well; very much looking forward to having this unwanted feature/bug fixed

fmarcoccia commented 3 years ago

+1! this behavior is very annoying

aaron5670 commented 3 years ago

+1! Need this feature too... :(

aaron5670 commented 3 years ago

A better solution is maybe a small animation. Like the example bellow. 👀 animation

teksebarna commented 3 years ago

One thing I don't understand: how come it's working perfectly on their demo page: https://hypeserver.github.io/react-date-range/#!/DateRangePicker/1 ?

isaac1104 commented 3 years ago

Any updates on this issue?

subwai commented 3 years ago

I managed to track down the issue to https://github.com/hypeserver/react-date-range/pull/399 In my opinion the logic in calcFocusDate is flawed from the start. It always assumes you want to focus to the startDate & it can't tell the difference between a click in the calendar vs an external selection like clicking a defined range.

I started writing a PR that implements the use of focusedRange[1] to at least prioritize endDate over startDate which will work well enough for my own issue (I built my own DateRangePicker with 2 calendar components, 1 for selecting start date & 1 for end date that operates independently but shares the range).

However, I don't believe that is enough to solve the entire issue as I think the differenceInCalendarMonths solution that currently exists doesn't really work at all.

differenceInCalendarMonths(start, end) > months

The difference in months will always be a negative value since start is always < end. The statement will therefor never be true & the currentFocusedDate will therefor never be used. The logic that existed prior to that PR was better & even worked for my own scenario, but won't work when you want to "reset" the calendar view.

An ultimate solution would be to expose a focusedDate prop rather than trying to solve all scenarios perfectly internally. Or maybe you could argue that it should be possible to "reset" by using a new key prop on the Calendar elements for those scenarios. Thoughts?

Fyi @teksebarna, the reason it works on the demo page is because it's using a version before that PR.

kamyar commented 3 years ago

@subwai thank you for the great investigation and yes, the demo was outdated and we recently automated its deployment. focusedDate prop sounds good to me, additionally animations would also be great. If you can lend a hand we would appreciate it, otherwise we can finalize a decision and I will try to take a look. :)

kamyar commented 3 years ago

It seems there is already a PR that might address it, please let us know what your thoughts are regarding that: https://github.com/hypeserver/react-date-range/pull/428 Duplicate of #427

owenbirdsall commented 3 years ago

Does anyone have a temporary workaround for this, or is it best to just use an older version for now?

LucyMac commented 3 years ago

I'm also having this issue, I need the month layout to stay consistent regardless of calendar date selection. @kamyar #428 looks good as far as I can tell - merging this would be amaaaazing 😃

kamyar commented 3 years ago

Hey @LucyMac we already added this option, can you take a look at retainEndDateOnFirstSelection prop in version 1.3.0?

Would appreciate if you confirm if it works so I can close this issue

nvm, wrong feature I will take another look into the PR for fixing it 👍

LucyMac commented 3 years ago

Ah awesome, thanks @kamyar 😊

Tcheetox commented 3 years ago

+1 Also interested in this. Looking forward to avoid 'month jumping' on selection.

kamyar commented 3 years ago

Hey all, #428 is merged, will try to make a release today :) Sorry regarding the delay 😅

qxFisher commented 3 years ago

@kamyar Hello! Is it possible to completely disable month jumping (focusing on start date) in calendar?

kamyar commented 3 years ago

@qxFisher with latest release I believe you can do it, can you check 1.4.0? see the changelog file for the new props.

kamyar commented 3 years ago

closing this as it was recently released with 1.4.0