Bootstrap-datepicker（日期范围）-如何在重新加载数据时刷新日历上的日期

Question

我已经将此日期范围选择器设置为Angular Component：https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range，但现在我遇到了一些问题：

1）选项不再起作用，我不知道是什么原因 2）当我以模式更改数据库时，我无法清除日期/重新初始化daterangepicker-它正在加载startDate和endDate的新日期（禁用start和endDate之前的日期）

我在其他父母组件中使用了这个daterangepicker。为此，我只是使用：

<cb-daterangepicker [defaultEndDate]="formatedDateTo" [defaultStartDate]="formatedDateFrom" [datepickerOptions]="datepickerOptions" (rangeValue)="changeRangeValue($event)"></cb-daterangepicker>

DaterangepickerComponent：

@Component({
selector: 'cb-daterangepicker',
templateUrl: './daterangepicker.component.html',
styleUrls: ['./daterangepicker.component.scss']
})
 export class DaterangepickerComponent implements OnInit, AfterViewInit, OnChanges {

private _options: DatepickerOptions;
private _isLoaded: boolean;
private _datepicker: any;
private _startDate: string;
private _endDate: string;

@Input()
set datepickerOptions(value: DatepickerOptions) {
    this._options = value;
};

@Input()
set defaultStartDate(value: string) {
    this._startDate = value;
    this.updatePicker();
}

@Input()
set defaultEndDate(value: string) {
    this._endDate = value;
    this.updatePicker();
}

@Input()
range = new DateRange();

@Output()
rangeValue = new EventEmitter<DateRange>();


updatePicker(){
    $('#dateFrom').datepicker('setStartDate', this._startDate);
    $('#dateFrom').datepicker('setEndDate', this._endDate);

    $('#dateTo').datepicker('setEndDate', this._endDate);
    $('#dateTo').datepicker('setStartDate', this._startDate);
}

constructor() {
    this.onChangeDate = this.onChangeDate.bind(this);
}

ngOnInit() {

}

ngOnChanges(changes) {
    console.log(changes);
}

ngAfterViewInit(): void {
    this._isLoaded = true;
    this.initializeDatepicker();
}

initializeDatepicker() {
    if (!this._isLoaded) {
        return;
    }
    if (this._datepicker) {
        this._datepicker.datepicker('destroy');
        this._datepicker = null;
    }
    this._datepicker = $('.input-daterange');
    this._datepicker.datepicker(this._options);
    this._datepicker.on('changeDate', this.onChangeDate);
}

onChangeDate() {
    this.range.startDate =$('#dateFrom').datepicker('getDate');
    this.range.endDate = $('#dateTo').datepicker('getDate');
    this.rangeValue.emit(this.range)
  }
}

daterangepicker的HTML模板：

<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" id="dateFrom"/>
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" id="dateTo"/>
</div>

在图片中，您可以看到我可以设置一些范围（设置了startDate和endDate，因此我只能选择开始和结束之间的日期<-另一件事是将默认范围设置为startDate和endDate的范围）： / p>

但是随后我使用模式更改数据库：

发生了什么事，因为startDate和endDate不同，所以看起来还不错...以前的范围在日历上仍然可见：

我的目标：每次更改数据库时都要刷新datepicker值。我知道此库“ clearDates”中有一个方法，但是当我在initializeDatepicker方法中使用它时，会导致一些错误。我想做什么提示？