仍在学习 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 尝试用字符串格式的日期文本覆盖值
有没有更简单的方法来处理这个问题?
最佳答案
您可以通过分离绑定(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
}
关于html - Angular 2 : Date Format Textbox ngModel doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40515747/