Question

在Angular应用中，我正在输入字段中显示从API到组件的数据。

所有字段都已填充，但日期类型不是Input元素

下面是html标记

<input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" 
          (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

在控制台中说

指定的值“ 2018-09-21T00：00：00”不符合要求的格式“ yyyy-MM-dd”。

我做了一个通用功能，将服务中的日期格式化为

FormatDate(iDate: Date) {
var inputDate:Date= new Date(iDate);
var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear());
return formattedDate;

}

和

this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob);

，但它没有在日期字段中显示值

在插值块中，我们可以使用管道格式化值

{{DOB | date:'mediumDate'}}

我们也可以用ngModel做到这一点吗？因为我不想格式化它的方法。

我该如何实现？

Answer 1

您的服务应该是这样的：

FormatDate(iDate: Date) {
   var inputDate = new Date(iDate);
   var formattedDate = inputDate.getFullYear()+'-'+(inputDate.getMonth() + 1)+'-'+ 
   inputDate.getDate();
   return formattedDate;
}

在您的ts文件中应该是这样的：

let newDate = new Date(this.CustomerVM.customer.CustomerDob);
this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(newDate);

Answer 2

日期的响应采用时间戳格式。时间戳记值未填充您的日期字段，因此您需要将时间戳记格式转换为日期格式。

var datePipe = new DatePipe("en-US"); let formatedyear = datePipe.transform(this.CustomerVM.customer.CustomerDob, 'MM/dd/yyyy'); this.CustomerVM.customer.CustomerDob = formatedyear;

然后从“ @ angular / common”导入{DatePipe}；在您的组件中

Answer 3

动作表达式不能包含管道。通过将library(dplyr) library(tidyr) test %>% group_by(id) %>% filter(class == "start" & lead(class) == "end" | class == "end" & lag(class) == "start") %>% group_by(group = gl(n()/2, 2)) %>% spread(class, time) %>% ungroup() %>% select(-group) %>% select(id, start, end) # id start end # <int> <dttm> <dttm> #1 1 2019-06-20 00:00:00 2019-06-20 00:05:00 #2 1 2019-06-20 00:10:00 2019-06-20 00:15:00 #3 2 2019-06-20 00:25:00 2019-06-20 00:30:00 #4 3 2019-06-20 00:45:00 2019-06-20 00:50:00提供的双向绑定分为属性绑定和事件绑定，可以实现更复杂的绑定。然后可以将日期管道包含在属性绑定表达式中：

[(ngModel)]

您示例中的<input [ngModel]="item.value | date:'yyyy-MM-dd'" (ngModelChange)="item.value=$event" type="data" />标记类似于以下内容：

input

Answer 4

使用 ngValue

指定的日期值不符合要求的格式Angular 5

4 个答案: