Angular2:如何使用具有NgModel双向绑定的JavaScript Date对象

前端之家收集整理的这篇文章主要介绍了Angular2:如何使用具有NgModel双向绑定的JavaScript Date对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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>
...

其他数据如firstname显示正确。但是在我刚刚得到的日期:

mm/dd/yyyy

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

我该怎么做?

更新:

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

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

`

老答案:

PLUNKER

你需要转换日期对象的输入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);
  }
}

猜你在找的Angularjs相关文章