title: input with value dont allow to change itself
body: <p>I have input, and inside of it I have <code>value={this.state.date}</code> I can't type in this input, when value is still there.</p>
  
  <p>I tried to use second variable <code>this.state.subdate</code> to change it first, but this made no effect. I tried placeholder, but this property can't make needed stuff.</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
  Col,
  Button,
  FormGroup,
  Input,
  Popover, 
  Row
   } from "reactstrap";
  import Calendar from 'react-calendar';
  import moment from 'moment';
  import { spawn } from 'child_process';
  
  let id = 0;
  function idGen(){
      return 'ds_select_'+(id++)
  }
  
  export default class Datetime extends Component{
  
      state={
      date: new Date(),
      isOpen : false,
      hours : '',
      minutes : '',
      subdate : '',
      }
  
  onChange(e){
      e.setHours(this.state.date.getHours())
      e.setMinutes(this.state.date.getMinutes())
      this.setState({ date : e })
      //this.props.onChange({name : this.props.name, value : this.dateMs(e)})
  } 
  
  
  
  constructor(props){
      super(props);
      this.id = idGen();
  }
  componentDidMount(){
      var da = new Date()
      this.setState({date : da, hours : da.getHours(), minutes : da.getMinutes(), subdate : da })
  }
  
  close(){
      this.setState({isOpen : !this.state.isOpen})
  }
  render(){
      return(&lt;&gt;
          {this.renderInput()}
          {this.renderCalendar()}
      &lt;/&gt;)
  }
  dateMs(date){
      return Date.parse(date)
  }
  renderInput(){
      return(
          &lt;Input 
          onBlur={(e) =&gt; {console.log('blur',e.target.value);
          this.setState({date : new Date(this.state.subdate),
              hours : new Date(this.state.subdate).getHours(),
              minutes :new Date(this.state.subdate).getMinutes()})}} 
          onClick={() =&gt; this.setState({isOpen : !this.state.isOpen})} 
          id={this.id}  type="text" name="date" placeholder={this.state.subdate} value={this.state.date}
          onChange={ e =&gt; {this.setState({subdate : e.target.value},() =&gt; {console.log(this.state.subdate)})}}    /&gt;
      )
  }
  
  renderCalendar(){
      return(
          &lt;Popover id={'_'+this.id} placement="bottom-start"  hideArrow offset={0} isOpen={this.state.isOpen} target={this.id} toggle={() =&gt;this.close()}&gt;
              &lt;Row style={{display: 'inline-grid', gridTemplateColumns:'360px 250px'}} form&gt;
                  &lt;Col md={12}&gt;
                      &lt;FormGroup style={{marginBottom:'0px'}}&gt;
                          &lt;Calendar
                              onChange={(e) =&gt; this.onChange(e)}
                              e={this.onChange}
                              value={this.state.date}
                          /&gt;
                      &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                  &lt;Col style={{gridColumnStart: 2}} md={10}&gt;
                      &lt;FormGroup row&gt;
                          &lt;Col sm={6}&gt;
                              &lt;Input valid={this.state.hours &gt;= 0 &amp;&amp; this.state.hours &lt;= 23} id={this.id+'hours'}
                              style={{textAlign:'center'}} type='number' max='23' min='0' name='hours' id='hours' placeholder={23}
                              value={this.state.hours}
                              onChange={e =&gt; {
                                  var dat = this.state.date;
                                  dat.setHours(e.target.value);
                                  this.setState({date : dat, hours : e.target.value, subdate : dat})
                              }} /&gt;
                          &lt;/Col&gt;
                          &lt;Col sm={6}&gt;
                              &lt;Input valid={this.state.minutes &gt;= 0 &amp;&amp; this.state.minutes &lt;= 59} id={this.id+'minutes'}
                              style={{textAlign:'center'}} type='number' max='59' min='0' name='minutes' id='minutes'
                              placeholder={23} value={this.state.minutes}
                              onChange={e =&gt; {
                                  var dat = this.state.date;
                                  dat.setMinutes(e.target.value);
                                  this.setState({date : dat, minutes : e.target.value, subdate : dat})
                              }} /&gt;
                          &lt;/Col&gt;                  
                      &lt;/FormGroup&gt;
  
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/Popover&gt;
      )
  }
  }
  </code></pre>
  
  <p>probably it is easy questions, because I just need an input property, like value\placeholder, but with some other features, that allow it to be real (so I can edit this thing by keyboard) and changeable by <code>this.setState()</code></p>
  
  <p>My problems were </p>
  
  <ol>
  <li><p><code>value</code> and <code>onChange</code> variable should be equal</p></li>
  <li><p><code>value</code> and <code>onChange</code> variable should not be <code>new Date(e.target.value)</code>, because it not allow you to delete something from string, if you want to change it you should highlight a letter and print a substitute.</p></li>
  <li><p>my aim was to send changes with <code>onBlur</code>, so inside it I'd just make <code>new Date(value)</code> from value I printed</p></li>
  </ol>