Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Current month should update when passed values change #48

Open
travisbloom opened this issue Aug 30, 2016 · 16 comments

Comments

Projects
None yet
@travisbloom
Copy link
Contributor

commented Aug 30, 2016

Moving this conversation over from #17.

Because SingleDatePicker and DateRangePicker month props are controlled internally, there's no way of programmatically changing the month once the component has already been mounted and used. #17 solves the initialVisibleMonth but there are still use cases not covered.

Examples:

  • A form has multiple datepickers. Even after initially opening, if one of the datepickers is selected, all the other form inputs should set their currentMonth to match
  • Allowing a HoC to control currentMonth will make it easier to arbitrarily jump n months back (see #29)

One proposal I have is to overhaul the API so that animation effects are triggered by watching for the currentMonth prop to change. We'd let a HoC always control the displayed month and pressing the "next month" button would just trigger a callback that the HoC would have to use to update currentMonth. Maybe if currentMonth is passed as a prop, use that instead of https://github.com/airbnb/react-dates/blob/master/src/components/DayPicker.jsx#L77?

@travisbloom

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2016

Additional consideration: How should we handle animations? At first glance it seems to make sense that if the currentMonth is more than 1 or two from the rendered month, don't animate the transition but just jump.

Another option is to only jump months when the calendar is closed...

@travisbloom travisbloom changed the title Date Ranges should update when passed values change Current month should update when passed values change Aug 30, 2016

@FezVrasta

This comment has been minimized.

Copy link

commented Oct 19, 2016

Just having the selector close when the initial month changes would be good to me.

@travisbloom

This comment has been minimized.

Copy link
Contributor Author

commented Oct 19, 2016

@majapw this prob a semver major label, just because if we changed the controlled nature of date it will break all existing implementations

@subicura

This comment has been minimized.

Copy link

commented Oct 20, 2016

👍

@mir3z

This comment has been minimized.

Copy link

commented Jan 3, 2017

What's the state of this discussion? I want to be able to say which month should be visible when opening the picker as stated in #240. I'm lost in all these issues, discussions and references between them.

@travisbloom

This comment has been minimized.

Copy link
Contributor Author

commented Jan 3, 2017

hi @mir3z. I believe #240 would be considered a duplicate of this ticket, sounds like your looking for the same functionality.

I haven't had time to work on any OS recently :(

@TMonika

This comment has been minimized.

Copy link

commented Sep 11, 2017

Hi @travisbloom ..
For DayPickerSingleDateController, I defined initialVisibleMonth: () => moment() but the first month in the calendar still shows the previous month(August). Not sure why previous month is shown as first month even after returning moment() from initialVisibleMonth. Your inputs would help me in figuring out the issue.

Also, what is the current status of this issue? I mean can we see the selected month instead of current month now?

@jabsatz

This comment has been minimized.

Copy link

commented Oct 23, 2017

I have the following setup:

A page with a list of ranges to select (This Month, Previous Month, Previous Year, etc.) and a DayPickerRangeController component, since you can also manually select these dates. So let's suppose today is October 23rd, so I go back 3 months to July in the calendar, when I click on the "This Month" range the present month is selected, so October 1st through October 31st.

However the calendar is still showing July. I wouldn't necesarily need it to change automatically, but there should at least be a way to pass in a "currentMonth" prop, with a "onChangeMonth" function to manipulate it from a parent. Is that possible?

@intositeme

This comment has been minimized.

Copy link

commented May 2, 2018

Anyone managed to get the DayPickerSingleDateController to show some other month programmatically?

@travisbloom

This comment has been minimized.

Copy link
Contributor Author

commented May 2, 2018

the solution we ended up using internally was to re-render the entire component when an external state updated the displayed date (setting a key value on the component will achieve this affect). It's not the most elegant solution (no animations, perf, etc) but it works.

@stahor

This comment has been minimized.

Copy link

commented Jun 25, 2018

Any updates on this?

@stahor

This comment has been minimized.

Copy link

commented Jun 25, 2018

Well, I've managed to achieve the required effect by adding refs. But this means that I have to use my own fork instead of original library and this will cause issues in future...
Is there any chance that required props will be added by the end of the year? Or at least DayRangePickerController will have a ref to DayPicker?

@majapw

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2018

I think actually now that we've merged in #1106, updating the calendar (sans refs) based on the month prop should be feasible without weird side-effects. :) Still needs to be... done ofc, but I think we could the library to respond to the prop in this way.

@stahor

This comment has been minimized.

Copy link

commented Jul 9, 2018

@majapw yea this version made my life much easier but I still need external controls for months and years so I've added ref to DayPicker into DayPickerRangeController in order to be able to call onMonthChange method. Can this be added to official version or I have to use forks?

@orouz

This comment has been minimized.

Copy link

commented Oct 8, 2018

@stahor did you manage to change months programmatically?

@stahor

This comment has been minimized.

Copy link

commented Nov 9, 2018

@orouz yes but only by using my own fork

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.