title: react-flatpickr range selection with two inputs populating both the dates in first input
body: <p>I am using react-flatpickr range plugin providing code below:</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import DatePicker from "./datePicker.js";
  
  import "./styles.css";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;DatePicker
          options={{
            dateFormat: "d-M-Y",
            defaultDate: "",
            disableMobile: "true",
            maxDate: "today"
          }}
          fromDateID="DashboardEndDatePicker"
          selectValue={[]}
          placeholder="From Date"
        /&gt;
        &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
        &lt;input id="DashboardEndDatePicker" placeholder="To Date" /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p><strong>datePicker.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Flatpickr from "react-flatpickr";
  import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
  import "flatpickr/dist/flatpickr.min.css";
  import "flatpickr/dist/themes/light.css";
  
  export default class DatePicker extends Component {
    constructor(props) {
      super(props);
      this.setDate = this.setDate.bind(this);
      this.clearDate = this.clearDate.bind(this);
  
      this.state = {
        selectValue: props.selectValue ? props.selectValue : "",
        options: props.options
          ? Object.assign({}, props.options, {
              plugins: [new rangePlugin({ input: "#" + props.fromDateID })]
            })
          : { plugins: [new rangePlugin({ input: "#" + props.fromDateID })] },
        disabled: props.disabled ? props.disabled : false,
        placeholder: props.placeholder ? props.placeholder : ""
      };
    }
  
    componentWillReceiveProps(newProps) {
      this.setState({
        selectValue: newProps.selectValue ? newProps.selectValue : "",
        options: newProps.options
          ? Object.assign({}, newProps.options, {
              plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })]
            })
          : { plugins: [new rangePlugin({ input: "#" + newProps.fromDateID })] },
        disabled: newProps.disabled ? newProps.disabled : false,
        placeholder: newProps.placeholder ? newProps.placeholder : ""
      });
    }
  
    clearDate() {
      this.refs.refDatePicker.flatpickr.clear();
    }
  
    setDate(newValue) {
      this.setState({
        selectValue: newValue ? newValue : ""
      });
      if (this.props.onChange) {
        this.props.onChange(newValue);
      }
    }
  
    render() {
      return (
        &lt;Flatpickr
          className="form-control clickable"
          disabled={this.state.disabled}
          ref="refDatePicker"
          placeholder={this.state.placeholder}
          options={this.state.options}
          value={this.state.selectValue}
          onChange={this.setDate}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>When ever I am selecting "to date" it is setting the same in "from date" field as well. Providing image below:</p>
  
  <p><a href="https://i.stack.imgur.com/wSqVV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wSqVV.png" alt="enter image description here"></a></p>
  
  <p>I have created a code sand box for the same:</p>
  
  <p><a href="https://codesandbox.io/s/cool-mcnulty-pbz4n" rel="nofollow noreferrer">Sandbox Link</a></p>
  
  <p>Not sure what I am missing here.</p>