React-datepicker: Cannot get renderCalendarTo to work

[leojh]

No matter what I try, it seems that the calendar will always attach to document.body or throws error.

I've tried settings the prop to a selector like #my_div, to a ref string, to a ref instance from the ref callback.
I either get i.appendChild is not a function which means that what I'm passing does not resolve to a node, or the calendar attaches to document.body.

I know that this is more related to the tether lib that is used, but according to their docs, they now use document.querySelector which is simple enough.

Let me know if anyone out there can help out.

[Inlesco]

Same issue. The datepicker props documentation is lackluster, no examples, only types mentioned. For renderCalendarTo, type is 'Any', so with no examples provided it's basically useless.

I'd like to ask: if react-datepicker is wrapped with another component, why the calendar is still appended to document.body, but not the wrapper / parent component by default? It'd make sense, especially for Unit tests as you could simulate clicks on the calendar because it's in as a child, etc.

sadpanda.jpg

[dimafeldman]

@leojh have you found the solution for that? I'm struggling with the same issue

[sebastiandedeyne]

Also can't seem to render the tether component anywhere else than the body

[dbenfouzari]

Same here,
Can't seem to render the component anywhere else than the body, event when trying to give a DOM element to renderCalendarTo as we can see in sources.

Please help !

[rafeememon]

This might be an upstream problem; see https://github.com/HubSpot/tether/issues/189 and https://github.com/souporserious/react-tether/issues/14

[JoakimLofgren]

It actually expects a DOMNode.

Setting a react ref to renderCalendarTo worked for me.

You might need to trigger a re-render using state to indicate that you've gotten the ref'ed element.
I can provide a example if needed in a gist.

[mahammedzkhan]

@JoakimLofgren Can you provide a gist please? I've tried it like this:
<div ref="test" ></div> and then as a property to the datepicker:
renderCalendarTo={this.refs.test} => that didn't work

[avindra]

Any ideas why renderCalendarTo is null using the following?

function Wrapper() {
let mountNode = null;
return <div ref={e => mountNode = e} >
    <DatePicker
      renderCalendarTo={ mountNode }
    />
  </div>
}

React panel in Chrome:

Using React 15.4.0 and react-datepicker 0.34.0

Furthermore, does anyone have a code-complete example of mounting the calendar to nodes other than document.body?

[avindra]

Our specific use case is to use react-datepicker, but while using css in a modular, non-global fashion with styled-components. It's really hard to solve this problem if renderCalendarTo is busted.

[avindra]

Found out the real issue, which is this:

Never access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack.

http://reactjs.cn/react/docs/more-about-refs.html#cautions

Basically, the ref is undefined at the time of rendering. So as @JoakimLofgren mentioned above https://github.com/Hacker0x01/react-datepicker/issues/520#issuecomment-257944098, you can use a combination lifecycle hooks and/or state to only pass the ref when it is actually calculated.

[vyarymovych]

JoakimLofgren, thanks for suggestion, but it's not working for me. I did the following: inside componentDidMount handler I called setState with proper ref filled and inside render method this ref is taken from state and passed via renderCalendarTo prop. Render was called once again but markup of calendar stayed in the end of body as previously.
What should I do to make this work? Or it's a bug related to 'react-datepicker' implementation?

[sebastiandeutsch]

I've managed to get it work by enhancing my component state with a field:

renderTo: null

then I've added a componentDidMount callback:

componentDidMount() {
  this.setState({ renderTo: this.refs.calenderTarget });
}

My <DatePicker> will be called with the following property:

...
renderCalendarTo={this.state.renderTo}
...

and then the Calender will be rendered inside the div.

[charliehavak]

I debugged this feature and found that although setting the renderCalendarTo prop to a valid element, it will still render to document.body.
From what I saw, the first rendering works well (i.e attached to the provided element) but the second falls back to body. This effectively renders to body.
Something in the internal logic does not to work well.
I believe that a dedicated style prop for the calendar is the right approach.

[raulrene]

@sebastiandeutsch I've tried the exact same thing and although the input gets rendered in my ref element, the calendar component is still rendered in the body directly

[supster]

I have a similar problem. I was able to get renderCalendarTo to work by using @sebastiandeutsch's approach. However, when I use the same component in a modal that has position: fixed, the calendar always render into the body. If I removed position: fixed from my modal css, the calendar would render correctly.

Any idea on how to fix this? I thought it could be because of TetherComponent, but even if I tried to implement the modal using Tether, the problem still persists.

[sebastiandeutsch]

I've update to the latest version and now I have the problem too. Did @supster @raulrene @charliehavak found a solution?

[raulrene]

@sebastiandeutsch I've tried for at least 2 more hours and gave up. I needed only the calendar, not the datepicker input functionality, so I ended up writing my own calendar multi datepicker component in less than 3 hours.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.