Closed teksebarna closed 2 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
+1 here as well; very much looking forward to having this unwanted feature/bug fixed
+1! this behavior is very annoying
+1! Need this feature too... :(
A better solution is maybe a small animation.
Like the example bellow. 👀
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 ?
Any updates on this issue?
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.
@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. :)
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
Does anyone have a temporary workaround for this, or is it best to just use an older version for now?
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 😃
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 👍
Ah awesome, thanks @kamyar 😊
+1 Also interested in this. Looking forward to avoid 'month jumping' on selection.
Hey all, #428 is merged, will try to make a release today :) Sorry regarding the delay 😅
@kamyar Hello! Is it possible to completely disable month jumping (focusing on start date) in calendar?
@qxFisher with latest release I believe you can do it, can you check 1.4.0? see the changelog file for the new props.
closing this as it was recently released with 1.4.0
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
[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!