React-day-picker: Show DayPickerInput

[laidinidis]

How can I show the DayPicker? I have a daterange (2 DayPickerInputs) and I want to show the "to" DayPicker when the "from" is selected.

[gpbl]

There are two component's methods available: showDayPicker and hideDayPicker that were not documented (now they are!). You can use them. However, the best way to accomplish what you are trying to do is to focus() the second input when the from is selected.

[paulcredmond]

@gpbl Can you give example code of this? I want to link a button outside of the component to show and hide the calendar but I can't get it to work.

[gpbl]

@paulcredmond simply using the ref prop should give you access to the day picker instance:

<DayPicker ref={ el => this.dayPicker = el } />
// then
this.dayPicker.showDayPicker();

[VinceSJ]

@gpbl Would you mind writing up a more complete code example or putting together a basic Code Sandbox to show this process a little more clearly? I had trouble getting it to work and not sure where I'm going wrong.

Because the ref to the DayPicker doesn't get created until render, I can't figure out how to make that ref accessible to methods in the container that's rendering both the DayPicker and a show/hide button.

Here's the Code Sandbox I was working on. It won't even render right now, but it gives an idea of the direction I was trying to go. https://codesandbox.io/s/4j59x81rw7

Thanks!

[paulcredmond]

@VinceSJ Create the ref in the constructor, e.g. this.myRef = React.createRef();

[VinceSJ]

@paulcredmond Thanks!

In case anyone wants a more complete example of this approach, here you go:

class MyTest extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();

    this.handleClickShow = this.handleClickShow.bind(this);
    this.handleClickHide = this.handleClickHide.bind(this);
  }

  handleClickShow() {
    const calendarNode = this.myRef.current;
    calendarNode.showDayPicker();
  }

  handleClickHide() {
    const calendarNode = this.myRef.current;
    calendarNode.hideDayPicker();
  }

  render() {
    return (
      <div>
        <DayPickerInput ref={this.myRef} />
        <button onClick={this.handleClickShow}>SHOW me</button>
        <button onClick={this.handleClickHide}>HIDE me</button>
      </div>
    );
  }
}

And if you want to poke around with something more interactive, this is the codesandbox I was using: https://codesandbox.io/s/vp8y0r35l