React-dates: DayPickerRangeController doesn't open calendar on months based on initial dates

Created on 12 Jan 2018  路  1Comment  路  Source: airbnb/react-dates

Hey there!
There are number of issues (example: https://github.com/airbnb/react-dates/issues/282), that in my opinion might be related to my problem, but since most of them are talking about other components, I've decided to post a new one.

If I use DayPickerRangeController with initial dates range that is further than 2 months from today:

  1. The calendars still open on today's month and next one
  2. The initial dates range is not visible as selected

I've done some debugging and the problem seems to disappear when instead of setting focusedInput to null, I choose either startDate or endDate initially.
With focusedInput set to null, the calendar doesn't open to selected dates even with initialVisibleMonth set to startDate or any other moment date in the either the current or the next month.

I'll add that if the dates are set to current month's dates or the 2 month's after current month, everything works fine.

Is this behavior expected? Because for me it's completely illogical 馃槈

Both screenshots contain console output from the logs placed inside the render method of the package's DayPickerRangeController component.
Both of the following screenshots show DayPickerRangeController's behavior with the following props:

{
  startDate: '2018-05-11', // but converted to moment - it's done correctly, you have to trust me :)
  endDate: '2018-05-25', // but converted to moment - it's done correctly, you have to trust me :)
  focusedInput: null,
  isFocused: true,
  { ...otherProps },
}
  1. This screenshot shows what happens after focusing on the startDate input:
    image

  2. This screenshot shows what happens after clicking next month button 2 times from the state of the 1st screenshot:
    image

As you can see on the 2nd screenshot, the logged values totally mismatch what we can see in the currently displayed calendar.

Most helpful comment

We've run into a similar issue with SingleDatePicker. If the focused props reads null, the initial visible month will not take the initialVisibleMonth prop into consideration and instead show the current month.

>All comments

We've run into a similar issue with SingleDatePicker. If the focused props reads null, the initial visible month will not take the initialVisibleMonth prop into consideration and instead show the current month.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

thomasdtucker picture thomasdtucker  路  3Comments

krissalvador27 picture krissalvador27  路  3Comments

Daniel15 picture Daniel15  路  3Comments

maciej-w picture maciej-w  路  3Comments

sag1v picture sag1v  路  3Comments