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

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 26 (16 by maintainers)

Commits related to this issue

Most upvoted comments

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 notifications@github.com 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 .

@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

@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

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!

@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

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 notifications@github.com 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 .

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')

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')?