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

仍在學習Angular2。有一個表格，我有一個startDate和endDate，我想爲每個輸入項目。我使用雙向綁定與我的模型對象的形式。Angular2：日期格式文本框ngModel不起作用

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

我的模型的日期屬性是Date類型：

public EndDate: Date,

當我運行此，並結合具有有效日期的模型，它只是顯示在MM/DD/YYYY文本框。我假設HTML5 type =「date」支持。但它沒有顯示實際的日期。它內置了日期選取器，非常好，但沒有顯示已經在屬性中的日期。

如果我將type =「date」更改爲type =「text」，我會看到類似於2018-12-31T00：00：00的內容，並且失去了我的日期支持，而且這不方便用戶使用。我試圖避免： 1）必須使用錯誤的數據類型（字符串）並將我的日期格式化爲字符串以供使用 - 這似乎是一個糟糕的想法和實踐 2）使用Javascript post post display嘗試用字符串格式化的日期文本覆蓋該值

是否有更簡單的方法來處理此問題？

來源

2016-11-09 enforge

這看起來是同樣的問題，但答案是一個可怕的選擇。一定有更好的方法。雙向綁定日期對象到Angular2中的表單真的非常罕見嗎？ http://stackoverflow.com/questions/37055311/angular2-how-to-use-javascript-date-object-with-ngmodel-two-way-binding – enforge

您可以通過分開綁定和做少量管道來實現這一點。

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

來源

2016-11-10 01:49:47 Fiddles

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

回答

相關問題