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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...