[SOLVED] how to use pure flatpickr in react?

how to use pure flatpickr in react?

I'm new in reactJS, and I am trying to use pure flatpickr (https://flatpickr.js.org , NOT react-flatpickr) Below is my current code. Any help on how to implement it properly?

import React, { Component } from "react"
import flatpickr from "flatpickr"

export default class Datepicker extends Component<IProps> {

  public render() {
    flatpickr(".datepicker")
    return (
        <div>
           <input type="text" className="datepicker" />
        </div>
    )
  }
}

Solution

flatpickr requires a node or selector passed into it. In React, for referring to the DOM, we use a ref

For handling events and providing other options, you can use the second argument for options.

Here is a demo:

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(
      <input type="date" 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>