Angular / JS: Daterangepicker после перезагрузки просмотра страницы с сохранением старых значений - PullRequest
Новая
       14

Angular / JS: Daterangepicker после перезагрузки просмотра страницы с сохранением старых значений

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

У меня огромная проблема. Я сделал оболочку из библиотеки JS https://bootstrap -datepicker.readthedocs.io / en / latest / , которая является компонентом daterangepicker в моем приложении Angular. Я думал, что все было хорошо, пока я не изменил базу данных на модальную, что есть на моей странице - когда я изменил базу данных и проверил daterangepicker, я заметил, что диапазон такой же, как и раньше - он должен отличаться, потому что defualt startDate и endDate в большинстве случаев различны , Поэтому каждый раз, когда я изменяю базу данных в моем модале, daterangepicker должен автоматически устанавливать новые startDate и endDate, но это не произойдет.

Это мой компонент класса: 

import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import 'bootstrap-datepicker';
import {ControlValueAccessor} from "@angular/forms";
import {DateRange} from "../date-range";

declare var $;


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

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

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

@Input()
set defaultStartDate(value: string) {
    this._startDate = value;
    $('#start').attr('value', value);
}

@Input()
set defaultEndDate(value: string) {
    this._endDate = value;
    $('#end').attr('value', value);
}

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

range: DateRange = new DateRange();

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

ngOnInit() {

}

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

}

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

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

}

И шаблон: 

<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" id="start" [(ngModel)]="_startDate"/>
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" id="end" [(ngModel)]="_endDate" />

Теперь у меня есть 2waybinding, и когда я использую ngModel, кажется, что он работает нормально, НО .. диапазон больше не рисуется, когда я поворачиваю указатель даты, нет выбора startDate, endDate и диапазон между этими датами не подсвечивается. Когда я ставлю attr.value помимо ngModel, тогда он делает это, но значения после изменения базы данных не обновляются.

Параметры DatePicker, которые я устанавливаю в родительском компоненте в ngOnViewInit и, например, выглядит так: 

            this.datepickerOptions = {
            todayHighlight: true,
            format: "dd-mm-yyyy",
            startDate: this.dateFrom,
            endDate: this.dateTo,
            datesDisabled: ['10-10-2018','14-10-2018']
        };

Каждый раз, когда я изменяю базу данных в модальных dateFrom и dateTo, получаю новые значения, но эти параметры кажутся одинаковыми - без обновления (они обновляются, когда я использую ngModel).

Есть идеи, ребята?

...