React-dates: Cannot indicate which month is visible on open

[majapw]

Ideally this should be a controlled prop that would default to the current month. That way you can close the <DayPicker /> and reopen to where you were previously

My vision is that this would be a currentMonth prop on the SingleDatePicker and on the DateRangePicker that would take in a moment object. If a parent component wanted to keep track of this in the state then, they could do so using the onPrevMonthClick and onNextMonthClick callbacks.

[travisbloom]

I can take a stab at this. You still want DayPicker to own the current month in its state after mounting right? Or should currentMonth be able to dynamically change and rerender the view?

[majapw]

I think that the DayPicker should still own its state, so this would not be fully controlled I guess. This would just be what month is visible when you first open the datepicker. So maybe we could name it something like visibleMonthOnOpen or something? What do you think?

[travisbloom]

Ya, I was concerned that if currentMonth was a prop the parent owned after showing it would mess up all the animation goodness.

Agree with calling it visibleMonthOnOpen. If there is a date passed to the component, do you want to use that as the default month as a backup?

Order I'm envisioning: month showing on mount goes visibleMonthOnOpen || date || moment().startOf('month')?

[travisbloom]

Trying to think if it's ever expected behavior for the initial visible month to be the current month if an initial date prop was passed...

[majapw]

Hmmm, I feel like it should be either explicitly defined or it should be the present month. I think that maybe it's not transparent enough behavior if we fall back to the selected date (plus with the DateRangePicker, do you use startDate? endDate? I think we probably want visibleMonthOnOpen || moment().startOf('month')

[travisbloom]

sounds good!

[Corei13]

@majapw @travisbloom fyi: https://github.com/airbnb/react-dates/pull/12/files#diff-38206f500edecedcd970973ba637f407R12

[travisbloom]

@Corei13 does that handle this use case?

If a user selects a visibleMonthOnOpen that is before minimumAllowedDate, I'm assuming they should still be taken to that month. I could add a warning to the prop type of visibleMonthOnOpen if it detects its before minimumAllowedDate?

[majapw]

I feel like that should be on the parent component to guarantee, not on the
DRP/SDP itself and so these should maybe be two separate changes.

On Thu, Aug 18, 2016, 6:46 PM Travis Bloom [email protected] wrote:

@Corei13 https://github.com/Corei13 does that handle this use case?

If a user selects a visibleMonthOnOpen that is before minimumAllowedDate,
I'm assuming they should still be taken to that month. I could add a
warning to the prop type of visibleMonthOnOpen if it detects its before
minimumAllowedDate?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/17#issuecomment-240906407,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtWgRHfrhgakm8e61CWYZor6TlCK7ks5qhQrxgaJpZM4JoAzb
.

[jcreamer898]

So, is there any reason why when using DRP it wouldn't just open to the month containing the startDate that was passed in?

[majapw]

I think that the fine tuned control of this prop allows for behavior like:

• User opens date picker, navigates to 6 months in the future
• User closes date picker without selecting a date
• User reopens the date picker, it is still 6 months in the future

I think that while in a lot of cases, it makes sense to open to the start
date month, we want to be able to cover all options easily, especially
those cases where no date has been selected.

On Fri, Aug 19, 2016, 10:29 AM jcreamer898 [email protected] wrote:

So, is there any reason why when using DRP it wouldn't just open to the
month containing the startDate that was passed in?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/17#issuecomment-241050316,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtf7V2pArC6DcLvLNiSjzvO_fFnDAks5qhcvFgaJpZM4JoAzb
.

[majapw]

It also covers @Corei13's case where when the datepicker opens, if
the allowed selectable range is not near the current month, we can still
show that month.

On Fri, Aug 19, 2016, 11:45 AM Maja Wichrowska [email protected] wrote:

I think that the fine tuned control of this prop allows for behavior like:

• User opens date picker, navigates to 6 months in the future
• User closes date picker without selecting a date
• User reopens the date picker, it is still 6 months in the future

I think that while in a lot of cases, it makes sense to open to the start
date month, we want to be able to cover all options easily, especially
those cases where no date has been selected.

On Fri, Aug 19, 2016, 10:29 AM jcreamer898 [email protected]
wrote:

So, is there any reason why when using DRP it wouldn't just open to the
month containing the startDate that was passed in?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/17#issuecomment-241050316,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtf7V2pArC6DcLvLNiSjzvO_fFnDAks5qhcvFgaJpZM4JoAzb
.

[jcreamer898]

Good call, let me know if I can help!

[travisbloom]

@majapw so there's a use case that isn't being addressed right now and I'm wondering if we can incorporate it in this fix. I have a form that has multiple date ranges to select from. I'd like to be able to change the month the calendar opens to based off data thats constantly changing in the form.

To achieve this, we need to be able to override currentMonth on the DayPicker but still enable it to be controlled internally if the dynamic currentMonth functionality isn't needed.

This is how I'm proposing we'd tackle it, let me know your thoughts: https://github.com/travisbloom/react-dates/blob/feature/issue-17-initial-month-on-open-prop/src/components/DayPicker.jsx#L109. This means DayPicker will have to get the focused prop passed down to it.

I made it so you can't dynamically update currentMonth while the datepicker is open because that would mess up all the built in animations but this shouldnt cause any issues (still need to add stories/tests).

[travisbloom]

then if someone just wanted to set the initialMonth and let the component control all changes after that, we would use a seperate prop, maybe initialVisibleMonth?

[travisbloom]

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

We would trigger animations like normal if the new currentMonth is + or - 1 month, and any other month would override the animation effect and jump to it right away.

Figured this might be a bit much API churn :/

[ljharb]

I like initialVisibleMonth as a function that returns a moment object, so that the time of mounting, as opposed to props creation, can determine which month is visible. (Consider the clock ticking over from the 31st to the 1st)

[travisbloom]

For the sake of simplicity, I've opened a PR with the initial task completed. The more complex example of currentMonth updating based on changing props can be done in a separate ticket.

I've taken @ljharb's recommendations and made the prop a fn that gets triggered. Awaiting https://github.com/airbnb/react-dates/pull/32 to write passing tests

[travisbloom]

hmmm, so this might not be as simple as I thought. For some reason SingleDatePicker passes focused=true on render but DateRangePicker waits until the initial click

[majapw]

Sorry can you clarify that? Like focused is true when you first load the SingleDatePicker? Wouldn't it imply that it's open on pageload?

Also there shouldn't be any real differences between the two components, but I did write one much much later so there might be accidental differences! D:

[travisbloom]

so if you go to https://github.com/rocketrip/react-dates/blob/master/src/components/DayPicker.jsx#L82 I'm trying to set the initialVisibleMonth initially and then in componentWillRecieveProps. I'm passing the focused prop down from SingleDatePicker and DateRangePicker and when it first is set to true, using that to determine when to call initialVisibleMonth (see @ljharb's comment).

The issue is that focused will always be true on the DateRangePicker

[travisbloom]

wait scratch that sorry, didnt see DateRangePicker is using different props, let me try that again

[travisbloom]

@majapw I think its working as expected, just carelessness on my end :)

I'll reopen the PR once https://github.com/airbnb/react-dates/pull/32 goes through and I can run mount enzyme tests

[majapw]

Since this initial problem is solved by #70, I'm going to close this and move discussion on making the visible month a fully controlled prop to https://github.com/airbnb/react-dates/issues/48.

Thanks!

[sag1v]

@majapw i know this is an oldie but can't find it in the docs. so basically can we get the current month with onClickNextMonth or onClickPrevMonth ? i only get the click event when using these functions

[jenniferleveaux]

@sag1v
You can access to the _currentMoment_ state (moment object) in your parent component by adding a ref to the date component
this.dayPicker.state.currentMonth

Day picker implementation with ref and prev/next callbacks.

 <DayPicker
    ref={(dayPicker) => { this.dayPicker = dayPicker; }}
    onPrevMonthClick={this.prevMonthClick}
    onNextMonthClick={this.nextMonthClick}
 />

But at this moment, _currentMonth_ hasn't yet been updated (+/- 1 month) because the callback method is called before updating the state value.

@majapw
Is there a better way to get this value without adding or removing 1 month manually like I did ?

   nextMonthClick() {
        const newMonth = this.dayPicker.state.currentMonth.clone().add(1, 'month');
        this.setState({ currentMonth: newMonth });
    }

callback method call (called before state update)
DayPicker.jsx#L543
and finally, the state update of currentMonth
DayPicker.jsx#L567