html - Angular 2 : Date Format Textbox ngModel doesn't work

Question

仍在学习 Angular2。有一个表单，我有一个 startDate 和 endDate，我想为每个输入项目。我正在使用双向绑定(bind)将我的模型对象绑定(bind)到表单。

<input type="date" name="EndDate" class="form-control input-sm" [(ngModel)]="selectedDeal.Enddate" required /> 

我的模型的日期属性是日期类型:

public EndDate: Date,

当我运行它并绑定(bind)一个具有有效日期的模型时，它只在文本框中显示 mm/dd/yyyy。我认为 HTML5 type="date"支持。但它不显示实际日期。它有内置的日期选择器，非常好，但不显示属性中已有的日期。

如果我将 type="date"更改为 type="text"，我会看到类似 2018-12-31T00:00:00 的内容，并且会失去对日期的支持，而且这对用户来说不友好。

我试图避免:1) 不得不使用错误的数据类型(字符串)并将我的日期格式化为字符串以供使用——这似乎是一个坏主意和做法2) 使用 Javascript post form display 尝试用字符串格式的日期文本覆盖值

有没有更简单的方法来处理这个问题？

Answer 1

您可以通过分离绑定(bind)并执行少量管道来实现此目的。

模板:(注意日期管道使用格式 2016-12-31，并且 ngmodel 和 modelchange 已拆分)

<input type="date" name="EndDate" class="form-control input-sm" [ngModel]="selectedDeal.EndDate | date: 'y-MM-dd'" (ngModelChange)="dateChanged($event)" required />

组件:

private dateChanged(newDate) {
    this.selectedDeal.EndDate= new Date(newDate);
    console.log(this.selectedDeal.EndDate); // <-- for testing
  }