Add options calendarFocus and preventUnnecessaryRefocus

hypeserver / react-date-range

A React component for choosing dates and date ranges.

MIT License

2.58k stars 667 forks source link

Add options calendarFocus and preventUnnecessaryRefocus #428

Closed lexispike closed 3 years ago

lexispike commented 3 years ago

Types of changes

What types of changes does your code introduce?

Put an x in the boxes that apply

[ ] Bugfix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description

Add options to

allow specified calendar focus directions ('forwards' or 'backwards') and
allow prevention of unnecessary refocus on selection of a date in viewing range (for non-scrolled calendars)

Related Issues: #427 & #268

kamyar commented 3 years ago

Thanks for the fix, I just resolved some conflict and one small comment. :)

kamyar commented 3 years ago

Can you kindly add two small gifs demoing the old and new way this behaves also to the PR description? Please let me know if you need any help

AnderUstarroz commented 3 years ago

Will this PR be merged anytime soon? If the new preventSnapRefocus flag prevents the "weird" effect of changing the month when selecting the start date (ongoing issue 427), this will bring joy to many people.

lexispike commented 3 years ago

https://jmp.sh/2leh8i8 GIF of example calendar with new options :)

lexispike commented 3 years ago

Sorry for the delay on this, should be good to go!

lexispike commented 3 years ago

Also, a before (or with preventSnapRefocus disabled): https://jmp.sh/dkpptq0 after (with it enabled, a longer gif): https://jmp.sh/VoZMDET

kamyar commented 3 years ago

Thank you for the contribution and addressing the comments! 🎉 I will try to cut a release today 🤞 :octocat:

kamyar commented 3 years ago

(Also sorry for the delay in coming back to this, has been a busy 1-2 months 😓 , thank you for the patience)

lucasNeuhauss commented 2 years ago

Hi. Will there be a new npm version release applying these changes soon? Looking forward to it. Thanks.

kamyar commented 2 years ago

Hey, sorry did not get a chance to do it last weekend. I plan to do this weekend, but if anyone would like to get involved, these are the changes needed: https://github.com/hypeserver/react-date-range/pull/497/files

bump to 1.4.0
update changelog file Feel free to open a PR and I can review, approve, merge & trigger push

kamyar commented 2 years ago

Hey all, v1.4.0 is released ✨, please take a look and let us know if you see something out of place. Have a nice weekend!

AnderUstarroz commented 2 years ago

Working great! Thanks @lexispike, thanks @kamyar.

cameronbraid commented 2 years ago

You guys rock, this is something that has bugged me a lot

AnderUstarroz commented 1 year ago

This is still an ongoing issue @kamyar. Please have a look at the the following scenario :

On mobile, displaying a single month.
Click the start date as the last day of the month.
Click the end date as the first day of the next month.

Expected outcome Stays on the next month.

Actual outcome: Jumps to the first month (even thought I am using alendarFocus={"backwards"} and preventSnapRefocus={true})