0

我在我的应用程序中使用https://github.com/skratchdot/react-bootstrap-daterangepicker。如果我选择自定义范围，则输入会在点击应用后更新。如果我选择一个预定义的范围，那么小部件会在不点击应用按钮的情况下关闭。预定义的范围也不会写入输入。

这是反应类的代码：

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>

4

1 回答 1

0

通过在“value”道具中交换“defaultValue”道具解决了这个问题。现在输入看起来像这样：

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

我还是不知道背景。如果有人有详细信息，我仍然感兴趣。

于 2017-06-28T07:43:11.287 回答