Question

我有一个大问题。我已经做了JS库https://bootstrap-datepicker.readthedocs.io/en/latest/的包装，这是Angular应用程序中的daterangepicker组件。我以为一切都很好，直到我更改了页面中具有模式的数据库为止-当我更改数据库并检查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时似乎可以正常使用。但是范围不再绘制了，当我打开datepicker时，没有选择startDate，endDate和这些日期之间的范围。当我把ngModel以外的attr.value放到那里时，它会这样做，但是数据库更改后的值不会更新。

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时它们正在更新）。

有创意的人吗？

Angular / JS：重新加载页面视图后，存储旧值的Daterangepicker

0 个答案: