Daterangepicker input is not updating

Question

I'm using the https://github.com/skratchdot/react-bootstrap-daterangepicker 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.

Here is the code of the react class:

 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 ( <div> Time frame:<br/> <DatetimeRangePicker timePicker timePicker24Hour autoUpdateInput alwaysShowCalendars locale={locale} startDate={startDate} endDate={endDate} ranges={this.ranges} onApply={this._handleApply} > <div className='input-group'> <input type='text' className='form-control' defaultValue={label}/> <span className='input-group-btn'> <button className='btn btn-default date-range-toggle'> <BootstrapGlyphicon glyphicon='calendar'/> </button> </span> </div> </DatetimeRangePicker> </div> ); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

The problem was solved by exchanging the "defaultValue" prop in a "value" prop. Now the input looks like this:

<input type='text' className='form-control' value={label} onChange={this._inputChanged}/>

I still don't know the background. If someone has detailed information I'm still interested.