React-dates: Unable to set initialVisibleMonth for DayPickerSingleDateController

[pradok]

Hi
I am using DayPickerSingleDateController for displaying single month.
I need to change the default month to another month but not the current month.
For eg. I am passing () => moment().subtract(2, 'month') to the initialVisibleMonth prop and it is not working.

Not sure what's the best way.
Thanks

[AlfredLabs-Hector]

Same here.
I am using version 15.0.0

[majapw]

Hi @pradok and @AlfredLabs-Hector, are you also setting the date prop at the same time? I think that that takes precedence over initialVisibleMonth as to what month is set.

[AlfredLabs-Hector]

Hi @majapw,
Let me briefly describe my cases.

package.json

"moment-timezone": "^0.5.14",
"react": "^16.0.0",
"react-addons-shallow-compare": "^15.6.2",
"react-dates": "^15.0.0"

case 1 (Not working)

const { date } = this.state; // default state of date value is null 

<DayPickerSingleDateController 
  date={date}
  initialVisibleMonth={() => moment().subtract(2, 'months')}
  onDateChange={date => {
    this.setState(date);
  }}
  numberOfMonths={3}
  isDayHighlighted={day1 => daysWithData.some(day2 => this.isSameDay(day1, day2))}
/>

The result shows 3 months: Nov. 2017, Dec. 2017 and Jan. 2018, while I expect it to be Sep. ~ Nov. 2017.
And there's also a strange behavior in this case, if I click previous month button twice to let it becomes Sep. ~ Nov. 2017, the highlighted dates in Nov. 2017 will not be highlighted.
Actually, it seems the latest month in this calendar will not show highlighted dates.
But I think it's another issue, the highlighted dates could be all unhighlighted if I set initialVisibleMonth to moment().add(10, 'months').

case 2 (Still not working)

<DayPickerSingleDateController 
  initialVisibleMonth={() => moment().add(10, 'months')}
  numberOfMonths={3}
  isDayHighlighted={day1 => daysWithData.some(day2 => this.isSameDay(day1, day2))}
/>

case 3 (Simple case not working either)

<DayPickerSingleDateController 
  initialVisibleMonth={() => moment().add(10, 'months')}
/>

Thanks.

[pradok]

Hi @majapw Yes I am using date props.
btw i am using 12.6.0 of react-dates, is that prop initialVisibleMonth available in that version?

I tried initialVisibleMonth={() => moment('2017-12-12')} with no date prop , i couldn't get the month default to December 2017. With date prop, it only highlights the day, so if I have prop date={moment('2017-12-12')} it doesn't change to the December 2017 and the month is set to current month though the day for December is highlighted after pressing the next month button.

As per @AlfredLabs-Hector comment above, These don't work at all
<DayPickerSingleDateController initialVisibleMonth={() => moment().add('months', 1)} />

<DayPickerSingleDateController initialVisibleMonth={() => moment('2017-12-12')} />

[wasabigeek]

@pradok @AlfredLabs-Hector does it work if you set the focused prop? (source)

[AlfredLabs-Hector]

Hi @wasabigeek,
Works for me!!
Thank you.
So the focused prop is necessary for initialVisibleMonth working functionally??

[wasabigeek]

It seems so. In fairness though this component is not well documented, the other components do state that focused is a required prop.

[majapw]

Yeah the need for focused to be true on the DayPickerSingleDateController is cos it was designed to function with the SDP. Perhaps setting that value to default true (which is a bit icky, but might make more sense in this case) would be the right approach.

[ericsaboia]

I'm not very familiar with the source code, but the problem is that this line returns now for the current month if hidden is true, instead of the date you specified.

I wonder why this was needed if initialVisibleMonth already returns now if no other date is specified by date or initialVisibleMonth attributes.

Maybe just removing this line would also fix it.

[HartiganHM]

Hey, all! Using DayPickerSingleDateController and having similar issues to the above when attempting to set initialVisibleMonth. The prior setup, where a date was being being passed wasn't scrolling to the appropriate month on render, which is why I investigated initialVisibleMonth. I've had no success with setting the focused prop or any other variation of solutions, so I thought I would check to see if there has been progress on this issue.

Here is my current build for reference:

<DayPickerSingleDateController
  date={date || null}
  placeholder={placeholder}
  onDateChange={date => this.handleDateChange(date)}
  focused={true}
  onFocusChange={({ focused }) => this.setState({ focused })}
  numberOfMonths={1}
  isDayBlocked={this.isDayBlocked}
  isOutsideRange={this.isOutsideRange}
  keepOpenOnDateSelect
  navPrev={<NavButton fontSize={'1.5em'}>chevron_left</NavButton>}
  navNext={<NavButton fontSize={'1.5em'}>chevron_right</NavButton>}
  hideKeyboardShortcutsPanel
  setDefaultDate={
    setDefaultDate && !defaultDateSet && this.setDefaultDate()
  }
  initialVisibleMonth={initialVisibleMonth}
/>

It's worth noting that we have implemented a lot of custom functionality, which is why there are a lot of custom attributes to the base component.

Thanks in advace for the help!

[HartiganHM]

As a follow-up, I was able to get this working after default setting focused={true}. Not ideal, but it seems to work. I thought I would reiterate the general solution for anyone still getting stuck.

[merksam]

@HartiganHM Thank you so much! I spent few hours trying to fix this behavior. Also, so everyone will know, if you don't specify focused={true} – initial date will be rendered only when it's from first 30 days until now. In my case DayPickerSingleDateController is in popup, so for example:

1. Open modal
2. Choose date in next few months
3. Close modal (date saved to somewhere)
4. Open modal – you will see that opened is current month (instead of month with selected date), also past days will be enabled again (it's disabled for my case) and you cannot choose any other date, BUT, onDateChange is firing...

If my explanation is not clear, please contact with me so I will give details (if someone needs)

[maximgatilin]

@HartiganHM Thank you very much! You saved my evening!

[JB185572]

My test cases for blocking days failing after set initialVisibleMonth prop. can any one have any idea?