Bootstrap-datepicker (daterange) - как обновить даты в календаре при перезагрузке данных - PullRequest
Новая
       15

Bootstrap-datepicker (daterange) - как обновить даты в календаре при перезагрузке данных

0 голосов
/ 09 января 2019

Я сделал этот указатель даты как угловой компонент: https://bootstrap -datepicker.readthedocs.io / en / latest / markup.html # date-range , но теперь у меня есть несколько проблем с этим :

1) Опции больше не работают, и я не знаю, в чем причина 2) Я не могу очистить даты / переинициализировать daterangepicker, когда я изменяю базу данных в модальном режиме - она ​​загружает новые даты, которые являются startDate и endDate (даты до начала и endDates отключены)

Я использую этот указатель даты в других родительских компонентах. Для этого я просто использую: 

<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)
  }
}

HTML-шаблон daterangepicker: 

<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>

enter image description here

Но тогда я использую модал для изменения базы данных:

enter image description here

И что случилось, так это то, что startDate и endDate различны, поэтому кажется, что все нормально, НО ... предыдущий диапазон все еще виден в календаре:

enter image description here

Моя цель: обновлять значения DatePicker каждый раз, когда я меняю базу данных. Я знаю, что в этой библиотеке есть метод 'clearDates', но когда я использую его в методе initializeDatepicker, возникают некоторые ошибки. Любые советы, что я должен делать?

...