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.

[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 [e-mail] 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 .

[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