typescript - Angular 2: Hur man använder JavaScript Date-objekt med NgModel tvåvägsbindning

Jag arbetar med Angular 2 och jag har denna kod:

JS, denna kod initierar medarbetarvariabeln för mallen:

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

Mall:

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

Andra uppgifter som förnamn visas korrekt. Men för datumet får jag bara:

mm/dd/yyyy

I inmatningselementet, som bör vara ett datum.

Hur kan jag göra detta?

Svar #1

UPPDATERING :

StackBlitz

när jag skrev detta svar fanns DatePipe inte, nu kan du bara göra så här

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

`

Gammalt svar:

PLUNKER

Du behöver konvertera date object till input type="date"-formatet som är yyyy-mm-dd, så här kommer det att fungera

Mall:

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

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

Svar #2

Läs rör och ngModel och mitt beslut:

<input type="date" class="form-control" id="myDate" [ngModel]="myDate | date:'y-MM-dd'" (ngModelChange)="myDate = $event" name="birthday">

Relaterade artiklar