title: Parse the Date input value to State React
body: <p>i have a component that filters the array based on range of dates(from,to) i have created the filter with hardcoded values and i want to get input from user and filter from array i uploaded my code below</p>
  <p>React Code:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  import DatePicker from &quot;react-datepicker&quot;;
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  
  import { registerLocale } from &quot;react-datepicker&quot;;
  import ro from 'date-fns/locale/ro';
  registerLocale('ro', ro)
  
  class MyDatepickerComponent extends Component {
  
    state = {
      startDate: new Date(),
      endDate: new Date(),
      datefilter:[]
    };
  
    handleChange = (date, event) =&gt; {
      console.log('onChange', date, event);
      this.setState({
        startDate: date
      });
    };
    handleChanges = (date, event) =&gt; {
      console.log('onChange', date, event);
      this.setState({
        endDate: date
      });
    };
    async componentDidMount() {
      var startDate = new Date(&quot;2021-12-10T17:31:00.000Z&quot;).getTime();
      var endDate = new Date().getTime();
      const response = await fetch('http://localhost:8081/items');
      const data = await response.json();
      var result = data.filter(d =&gt; {
        var time = new Date(d.Date).getTime();
        return (startDate &lt; time &amp;&amp; time &lt; endDate);
      });
      console.log(result);
      this.setState({ datefilter: result })
    }
  
    async onFormSubmit(e) {
      e.preventDefault();
  
      var startDate = new Date(this.state.startDate).getTime();
      var endDate = new Date(&quot;2021-12-14T18:31:00.000Z&quot;).getTime();
      const response = await fetch('http://localhost:8081/items');
      const data = await response.json();
      var result = data.filter(d =&gt; {
        var time = new Date(d.Date).getTime();
        return (startDate &lt; time &amp;&amp; time &lt; endDate);
      });
      console.log(result);
      this.setState({ datefilter: result })
    }
  
    render() {
  const datefilter = this.state.datefilter
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.onFormSubmit}&gt;
          &lt;DatePicker
            onChange={this.handleChange}
            selected={this.state.startDate}
            showTimeSelect
            dateFormat=&quot;MM/dd/yyyy  EE hh:mm a&quot;
            locale=&quot;en&quot;
          /&gt;
          &lt;DatePicker
            onChange={this.handleChanges}
            selected={this.state.endDate}
            showTimeSelect
            dateFormat=&quot;MM/dd/yyyy  EE hh:mm a&quot;
            locale=&quot;en&quot;
          /&gt;
  &lt;input type=&quot;submit&quot; /&gt;
  &lt;/form&gt;
          
          &lt;table style={{}} class=&quot;table&quot;&gt;
            &lt;thead class=&quot;thead-dark&quot;&gt;
              &lt;tr&gt;
                &lt;th scope=&quot;col&quot;&gt;Item ID&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Item Name&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Status&lt;/th&gt;
                &lt;th scope=&quot;col&quot;&gt;Date&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {datefilter.map(table =&gt; (
                &lt;tr&gt;
                  &lt;td&gt;{table.ID}&lt;/td&gt;
                  &lt;td&gt;{table.ItemName}&lt;/td&gt;
                  &lt;td&gt;{table.Status}&lt;/td&gt;
                  &lt;td&gt;{table.Date}&lt;/td&gt;
                &lt;/tr&gt;
              ))}
            &lt;/tbody&gt;
          &lt;/table&gt;
  
        &lt;/div&gt;
      )
    };
  }
  </code></pre>
  <p>export default MyDatepickerComponent;
  i want to change the startdate and enddate based on user input kindly helpme to do this</p>