使用Typescript + Angular填写日期输入

时间:2018-07-23 14:09:05

标签: angular typescript date input

我一直在尝试用TypeScript填充日期输入,但是没有运气:

我有3个日期,格式如下:dd / MM / yyyy ... 因此,我已经解析了每个数字以将其格式更改为yyyy-MM-dd,然后使用datepipe将其分配给每个输入的ngModel var。我尝试了不同的格式,但似乎不起作用。

HTML:

<div>
    <input type="date" ngModel="inputDate | date:'yyyy-MM-dd'"">
</div>

<div>
    <input type="date" ngModel="inputDateFrom | date:'yyyy-MM-dd'"">
</div>
<div>
    <input type="date" ngModel="inputDateTo | date:'yyyy-MM-dd'"">
</div>

TS:

let dateFill = data[4] + '/' + data[5] + '/' + data[6];
let parsedDate = dateFill.split("/");

this.inputDate = this.datepipe.transform(new Date(parsedDate[2] + '-' + parsedDate[1] + '-' + parsedDate[0]), 'yyyy-MM-dd');
this.inputDateFrom = this.datepipe.transform(new Date(parsedDate[5] + '-' + parsedDate[4] + '-' + parsedDate[3]), 'yyyy-MM-dd');
this.inputDateTo = this.datepipe.transform(new Date(parsedDate[8] + '-' + parsedDate[7] + '-' + parsedDate[6]), 'yyyy-MM-dd');

1 个答案:

答案 0 :(得分:2)

为使绑定生效,您需要像这样将ngModel包围在[(中:

<input type="date" [(ngModel)]="inputDate | date:'yyyy-MM-dd'"">

有关绑定的更多信息,请参见in the docs

您也不能在ngModel绑定中使用管道,因此您需要删除该管道:

<input type="date" [(ngModel)]="inputDate">