React-dates: [QUESTION] Can I open calendar on endDate?

[preddevil213]

react-dates version
e.g. [email protected]

Describe the bug
A clear and concise description of what the bug is.

• It is not an actual bug, just a question: can I open the calendar on endDate? Right now clicking on both startDate and endDate in calendar always show the selected dates and months starting at startDate.

[mmarkelov]

@preddevil213 don't understand what are you talking about.
Date opens depending on what input you clicked:
http://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default

[yaroslav-perec]

@mmarkelov I think he means that if you pre-select a date range, for example, 4 months (August, September, October, and November), and by clicking on the endDate calendar, you will see the first two months August and September instead of October and November

[mmarkelov]

@yaroslav-perec as workaround for this purpose we can use initialVisibleMonth like so

        <DateRangePicker
          {...props}
          startDate={startDate}
          endDate={endDate}
          initialVisibleMonth={focusedInput === START_DATE ? () => moment() : () => moment().add(2, 'months')}
        />

[mattaningram]

@mmarkelov This shouldn't need a workaround, this should be default behavior of any date range calendar. It is how every other calendar picker I have used works, and it's particularly awkward if you have selected a long time range and want to visually edit the end date using the calendar, you have to clumsily click through many months. It's not very good UX.

[mattaningram]

@mmarkelov and I just checked the Storybook, the calendar does not open to the End Date when you click the End Date input:

This is a bug in my view.

[chasekaylee]

Any updates on this? The same thing is happening to me.

[mattaningram]

Amazingly this even happens on the www.airbnb.com home page. 🤦 Meaning if I set a long date range and then want to change the end date, I have to tediously click the arrow over and over until I find the end date.

[ranneyd]

@yaroslav-perec as workaround for this purpose we can use initialVisibleMonth like so

        <DateRangePicker
          {...props}
          startDate={startDate}
          endDate={endDate}
          initialVisibleMonth={focusedInput === START_DATE ? () => moment() : () => moment().add(2, 'months')}
        />

1. Smart!
2. I'd do moment(endDate).subtract(1, "month") instead so it shows the month of the end date
3. Doesn't solve the issue if the picker is already open (if they click on the start date to open the calendar, then click on the end date, I'd like it to switch to that month on the calendar)