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

Question

I'm working with Angular 2 and I have this code:

JS, this code initiates the employee-variable for the template:

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

Template:

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

Other data like firstname is displayed correctly. But for the date I just get:

mm/dd/yyyy 

In the input element, which should be a date.

How can I do this?

Answer 1

UPDATE:

StackBlitz

when I wrote this answer DatePipe did not exist, now you can just do this

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

---

`

---

Old Answer:

PLUNKER

You need to convert date object in the input type="date" format which is yyyy-mm-dd, this is how it will work

Template:

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

Component (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);   } }