React-dates: Keep the calendar open?

[acp31]

Is there a practical way for me to edit the external DateRangePickerWrapper in the examples folder that would keep the calendar visible no matter the focus input? The only way I could think to do this was to edit the react date files. I would like to avoid this because making those edits could have consequences. Thank you for the calendar and your help!

[majapw]

Hi @acp31! Sorry for just now getting back to this. The easiest way to do this would be just to modify the onFocusChange method in the DateRangePickerWrapper to be:

  onFocusChange(focusedInput) {
    if (!focusedInput) return; // doesn't update the focusedInput if it is trying to close the DRP
    this.setState({ focusedInput });
  }

This also requires you to set the initial state.focusedInput value to START_DATE or END_DATE.

Of course, this DRP will not take up space as it is absolutely positioned, so you'd have to change some of the css if you wanted that instead. If you want all the DRP logic, but just want the calendar and not the inputs, check out the DayPickerRangeController component (https://github.com/airbnb/react-dates/blob/master/src/components/DayPickerRangeController.jsx). I don't have documentation for it... yet! but soon. :)