react-datepicker: Cannot get renderCalendarTo to work

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 18 (1 by maintainers)

Most upvoted comments

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

Inlesco on Jul 26, 2016

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.

sebastiandeutsch on Dec 20, 2016

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.

JoakimLofgren on Nov 2, 2016

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 on Nov 21, 2016

@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

mahammedzkhan on Nov 9, 2016

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 !

dbenfouzari on Oct 7, 2016