Question

仍在学习Angular2。有一个表单，我有一个startDate和endDate，我希望每个都有输入项。我正在使用与模型对象的双向绑定到表单。

INSERT INTO tagmap SELECT images.id FROM images (id, tagid, imageid) VALUES(tagid || images.id, tagid, images.id);

我的模型的日期属性是Date：

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

当我运行它并绑定具有有效日期的模型时，它只在文本框中显示mm / dd / yyyy。 HTML5类型=＆＃34;日期＆＃34;支持我认为。但它没有显示实际日期。它内置了日期选择器，非常好，但没有显示已经存在的日期。

如果我改变了类型=＆＃34;日期＆＃34;输入=＆＃34; text＆＃34;，我看到2018-12-31T00：00：00之类的东西，并且丢失了我的约会支持，加上这不是用户友好的。

我试图避免： 1）必须使用错误的数据类型（字符串）并将我的日期格式化为字符串以供使用 - 这似乎是一个坏主意和实践 2）使用Javascript post表单显示尝试使用字符串格式的日期文本覆盖值

有没有更简单的方法来解决这个问题？

Answer 1

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

模板:(注意日期管道使用格式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
  }

Angular2：日期格式文本框ngModel不起作用

1 个答案: