title: Daterangepicker input is not updating
body: <p>I'm using the <a href="https://github.com/skratchdot/react-bootstrap-daterangepicker%20react%20bootstrap%20daterangepicker" rel="nofollow noreferrer">https://github.com/skratchdot/react-bootstrap-daterangepicker</a> in my app. If I select a custom range the input is updated after hitting apply. If I select a predefined range then the widget closes wihtout hitting the apply button. Also the predefined range is not written to the input. </p>
  
  <p>Here is the code of the react class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class DateTimePicker extends React.Component {
    constructor(props) {
      super(props);
  
      this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
  
      this.ranges = {
     'Today': [moment().startOf('day'), moment().endOf('day')],
     'Yesterday': [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days') ],
     'Last 7 Days': [moment().subtract(6, 'days'), moment()],
     'Last 30 Days': [moment().subtract(29, 'days'), moment()],
     'This Month': [moment().startOf('month'), moment().endOf('month')],
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      };
  
      this._handleApply = this._handleApply.bind(this);    
    }
  
    _handleApply(event, picker) {
     this.props.onChange(
      picker.startDate.format(this.DATE_FORMAT), 
      picker.endDate.format(this.DATE_FORMAT));
    }
  
    render() {
     let startDate = moment(this.props.startDate);
     let endDate = moment(this.props.endDate);
  
      let start = startDate.format(this.DATE_FORMAT);
      let end = endDate.format(this.DATE_FORMAT);
      let label = start + ' to ' + end;
      if (start === end) {
        label = start;
      }
  
      let locale = {
        format: 'YYYY-MM-DD HH:mm:ss',
        separator: ' to ',
        applyLabel: 'Apply',
        cancelLabel: 'Cancel',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: moment.weekdaysMin(),
        monthNames: moment.monthsShort(),
        firstDay: moment.localeData().firstDayOfWeek(),
      };
  
      return (
       &lt;div&gt;
        Time frame:&lt;br/&gt;
      &lt;DatetimeRangePicker
        timePicker
        timePicker24Hour
        autoUpdateInput
            alwaysShowCalendars
        locale={locale}
        startDate={startDate}
        endDate={endDate}
        ranges={this.ranges}
        onApply={this._handleApply}
      &gt;
        &lt;div className='input-group'&gt;
          &lt;input type='text' className='form-control' defaultValue={label}/&gt;
            &lt;span className='input-group-btn'&gt;
                &lt;button className='btn btn-default date-range-toggle'&gt;
                  &lt;BootstrapGlyphicon glyphicon='calendar'/&gt;
                &lt;/button&gt;
            &lt;/span&gt;
        &lt;/div&gt;
      &lt;/DatetimeRangePicker&gt;
     &lt;/div&gt;
      );
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>