Вход Daterangepicker не обновляется

Я использую https://github.com/skratchdot/react-bootstrap-daterangepicker%20react%20bootstrap%20daterangepicker в своем приложении. Если я выбираю пользовательский диапазон, то ввод обновляется после нажатия клавиши "Применить". Если я выберу предопределенный диапазон, то виджет закроется без нажатия кнопки "Применить". Также предопределенный диапазон не записывается на вход.

Вот код класса реакции:

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>

Источник

1 ответ

Проблема была решена путем замены свойства "defaultValue" на свойство "value". Теперь вход выглядит так:

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

Я до сих пор не знаю фона. Если у кого-то есть подробная информация, мне все равно интересно.

Источник
Другие вопросы по тегам