Question

我有一个输入框类型数据和一个数据贴纸。我希望两者都有相同的日期对象，因为如果你修改一个，另一个应该更新数据，但是它没有用：我有这个：

<input style="width: 150px;" [(ngModel)]="currentDateFrom" type="date" pattern="\d\d\/\d\d\/\d\d\d\d">
<button (click)="hideDateFrom = !hideDateFrom;">Select</button>
<datepicker [hidden]="hideDateFrom" [(ngModel)]="currentDateFrom" [minDate]="minDate" [showWeeks]="true"></datepicker>

但首先，输入框没有采用渲染器的日期，第二次修改输入时，datepicker没有更新，反之亦然。

所以我尝试将输入类型更改为“text”。以这种方式，它在渲染器时获取数据。但你不能做双向ngModel（因为字符串类型不再是日期）你应该改为：

<input style="width: 150px;" [ngModel]="currentDateFrom | date:'dd/MM/y'" (ngModelChange)="onChanges($event)" type="text" pattern="\d\d\/\d\d\/\d\d\d\d" >

在this example中，但输入和日期选择器之间的问题仍然存在

Answer 1

我找到了一个解决方案，花了很短的时间，所以我与你分享。

<input #fromDate [value]="getDateFrom() | date:'dd/MM/y'" type="text" pattern="\d\d\/\d\d\/\d\d\d\d" (keyup.enter)="currentDateFrom = getAsDate(fromDate)" (blur)="currentDateFrom = getAsDate(fromDate)">

旧的datepicker和按钮功能正常，只需修改输入即可。使用此输入，在触发模糊或键入事件时，将修改模型对象。如果你给输入一个id（#fromDate）会更容易。

要使其有效，您还需要打字稿代码：

    public getDateFrom():number {
        return this.currentDateFrom && this.currentDateFrom.getTime() || new Date().getTime();
    }
    public getAsDate(date: HTMLInputElement) {
        let data = new Date();
        if (date.validity.valid && date.value != "") {
            let values =  date.value.split("/")
            //Day
            data.setDate(Number.parseInt(values[0]))
            //Month
            data.setMonth(Number.parseInt(values[1])-1)
            //Year
            data.setFullYear(Number.parseInt(values[2]))

            return data;
        }
        return null;
    }

也许返回null不是最好的解决方案，但链接input-datepicker的主要问题是解决。

输入框+ datepicker angular2 2.0

1 个答案: