kendo DatePicker 的绑定有一个错误。
'value'应该是一个有效的JavaScript Date实例。
我的web api在asp core中获取一个学生是:
[HttpGet, Route("/api/master/{id}")]
public JsonResult GetStudentById(int id)
{
return Json(new { id = 1, RegisterDate = DateTime.Now });
}
它返回的是:
{"id":1,"registerDate":"2018-05-01T13:23:35.1229748+04:30"}
最后在我的angular组件中是:
student: Student = new Student();
constructor() { }
ngOnInit() {
this.http
.get(`http://localhost:58824/api/master/${10}`, { headers: this.setHeader() })
.subscribe(response => { this.student = response; });
}
view:
<form novalidate #form="ngForm" (submit)="save(form)">
<label for="birthDate">Date</label>
<kendo-datepicker [format]="'dd-MM-yyyy'" name="registerDate" [(ngModel)]="student.registerDate"></kendo-datepicker>
</form>
有一个错误。'value'应该是一个有效的JavaScript Date实例。
不用说,我已经在app.module的imports数组中添加了DateInputsModule。
这个配置从序列化数据中删除了时区(+04:30)。
services.AddMvc()
.AddJsonOptions(options =>
{
options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Unspecified; // Treat as a local time if a DateTime is being converted to a string.
});
或者尝试以这种方式指定DateTimeFormat,并通过设置DateTimeStyles为AdjustToUniversal,使其自动调整日期为UTC。
services.AddMvc()
.AddJsonOptions(options =>
{
var settings = options.SerializerSettings;
var dateConverter = new IsoDateTimeConverter
{
DateTimeStyles = DateTimeStyles.AdjustToUniversal,
DateTimeFormat = "yyyy'-'MM'-'dd'T'HH':'mm':'ssK"
};
settings.Converters.Add(dateConverter);
});
中使用的值。kendo-datepicker
必须是 Date
但在你的情况下,它是一个 string
.
你需要将其转换为有效的 Date
对象,这可以通过例如一个 JSON Reviver或利用 IntlService.parseDate
方法 (参考资料).
@Component({ ... })
public class MyComponent
{
value: Date;
valueString: string;
constructor(private intl: IntlService) {
this.value = this.intl.parseDate("2018-05-01T13:23:35.1229748+04:30");
this.valueString = "2018-05-01T13:23:35.1229748+04:30";
}
}
html
<!-- Works fine -->
<kendo-datepicker
[(value)]="value"
></kendo-datepicker>
<!-- Throws error: The 'value' should be a valid JavaScript Date instance -->
<kendo-datepicker
[(value)]="valueString"
></kendo-datepicker>
你也可以在KendoUIs文档中找到一个可能的实现例子 (鏈接)