Angular 2 : How to use JavaScript Date Object with NgModel two way binding

Question

我正在使用 Angular 2，我有这段代码:

JS，此代码启动模板的员工变量:

handleEmployee(employee : Employee){
        this.employee = employee;
        this.employee.startDate = new Date('2005/01/01');
        console.log(this.employee);
    }

模板:

...
<div>
    <label>Start date: </label>
    <input [(ngModel)]="employee.startDate" type="date" name="startDate"/>
  </div>
  <div>
...

名字等其他数据可以正确显示。但是对于我刚得到的日期:

mm/dd/yyyy

在输入元素中，它应该是一个日期。

我该怎么做？

Answer 1

更新:

StackBlitz

当我写下这个答案时 DatePipe不存在，现在你可以这样做

<input [ngModel]="startDate | date:'yyyy-MM-dd'" (ngModelChange)="startDate = $event" type="date" name="startDate"/>

---

`

---

旧答案:

PLUNKER

您需要将 date object 转换为 input type="date" 格式，即 yyyy-mm-dd，方法如下它会起作用

模板:

<input [(ngModel)]="humanDate" type="date" name="startDate"/>

组件(TS):

export class App {
  startDate: any;

  constructor() {
    this.startDate = new Date(2005, 1, 4);
  }

  set humanDate(e){
    e = e.split('-');
    let d = new Date(Date.UTC(e[0], e[1]-1, e[2]));
    this.startDate.setFullYear(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
  }

  get humanDate(){
    return this.startDate.toISOString().substring(0, 10);
  }
}