使用Angular 4

Question

我是angular的新手，但是在加载页面时，我需要为date类型的html输入分配一个日期。

我注意到，如果您将输入类型从日期更改为文本，则将值分配给输入，但将日期保留为未分配值。

有人会知道我要去哪里。

按照我的代码。

HTML

<input class="form-control" 
       type="date" 
       maxlength="10" 
       placeholder="dd/mm/yyyy"
       [(ngModel)]="carFilter.dataInicial"  
       (ngModelChange)="onDateChangeFim($event)"    
        min="{{auxFimMinDate}}"
        max="{{auxFimMaxDate}}">

组件示例

export class CarComponent implements AfterViewInit, OnInit {

    carFilter : CarModel;
    auxInMaxDate: Date  = new Date("2099-12-30");
    auxFimMinDate: Date  = new Date("1900-01-01");


    ngOnInit(): void {

        this.carFilter  = new CarModel();
        const data = new Date();        
        this.carFilter.dataInicial = data;

    }
}

模型示例

export class CarModel {

    offSet : number;
    dataInicial : Date;
    dataFinal : Date;

    constructor(
                offSet:number,
                dataInicial : Date,
                dataFinal : Date
                ){

        this.offSet = offSet;
        this.dataInicial = dataInicial;
        this.dataFinal = dataFinal;     

    }
}

图像输入

控制台Google Chrome

Answer 1

我能够通过分配ngModel解决问题。日期：“ yyyy-MM-dd”。我必须研究它为什么这样工作。如果有人想发表评论或提出更好的建议，谢谢。 感谢所有帮助@Samy Sammour和@Dmitriy Snitko的人

<input class="form-control" 
   type="date" 
   maxlength="10" 
   placeholder="dd/mm/yyyy"
   [ngModel]="carFilter.dataInicial | date:'yyyy-MM-dd'"  
   (ngModelChange)="onDateChangeFim($event)"    
    [min]="auxFimMinDate"
    [max]="auxFimMaxDate">

Answer 2

可变日期应该是Date中的对象。不只是一个字符串。

因此，请尝试添加一个真实的对象：

this.carFilter  = new CarModel();
var data = new Date('10/09/2018');        
this.carFilter.dataInicial = data;

<input type="date" [(ngModel)]="carFilter.dataInicial" />