Control opening/closing of the Flatpickr calendar view by a wrapper component - reactjs

Question

I don't want to have input for Flatpickr. Instead it should be triggered by clicking from a div and then the calendar view shows up.
import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
export default class CustomDatePicker extends Component {
constructor(props) {
super(props);
this.baseOptions = {
allowInput: false,
dateFormat: 'Z',
altInput: true,
wrap: true,
...this.props.options
};
this.state = { isOpen: false };
}
onOpenToggle = () => this.setState({ isOpen: !this.state.isOpen });
componentDidMount() {
document.addEventListener('click', this.handleClick, false);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClick, false);
}
handleClick = event => {
if (this.node && this.node.contains(event.target)) {
return;
}
this.setState({ isOpen: false });
};
render() {
const { selectedDate, label, onChange } = this.props;
const { isOpen } = this.state;
return (
<div
className="custom-date-picker"
onClick={this.onOpenToggle}
ref={node => (this.node = node)}
>
<div className="custom-date-picker-icon">
<i className="fa fa-calendar" />
</div>
<div className="custom-date-picker-select">
{selectedDate ? <div>{selectedDate}</div> : <div>{label}</div>}
</div>
<div className="custom-date-picker-arrow">
{isOpen ? (
<i className="fa fa-chevron-up" />
) : (
<i className="fa fa-chevron-down" />
)}
</div>
{isOpen && (
<div className="custom-date-picker-panel">
{/* <Flatpickr
value={selectedDate}
options={this.baseOptions}
onChange={(_, dateStr) => onChange(dateStr)}
/> */}
</div>
)}
</div>
);
}
}
Basically I need to show the calendar view inside div with className custom-date-picker-panel
and onChange I pass a function to update the able of the div
Can you please show me how to achieve that?

Answer 1

react-flatpickr does not have that build-in. But you can use pure flatpickr for implementing this functionality.
class App extends React.Component {
constructor(props) {
super(props);
this.datePicker = React.createRef();
}
onChange(selectedDates, dateStr, instance) {
console.log(selectedDates);
}
componentDidMount() {
flatpickr(this.datePicker.current, {
onChange: this.onChange
});
}
render() {
return(
<div style={{ border: "1px solid black", height: 100, width: 100}} ref={this.datePicker} />
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div id="root"></div>