'value' 应该是 Kendo Angular DatePicker 中的有效 JavaScript 日期实例
The 'value' should be a valid JavaScript Date instance in Kendo Angular DatePicker
绑定 kendo DatePicker 有错误。
The 'value' should be a valid JavaScript Date instance
我的网站 api 在 asp 获得学生的核心是:
[HttpGet, Route("/api/master/{id}")]
public JsonResult GetStudentById(int id)
{
return Json(new { id = 1, RegisterDate = DateTime.Now });
}
它 returns :
{"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/`, { headers: this.setHeader() })
.subscribe(response => { this.student = response; });
}
查看:
<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 日期实例
不用说了,我已经在 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, or by utilizing the IntlService.parseDate
method (Reference).
@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 文档 (Link)
中找到可能实现的示例
绑定 kendo DatePicker 有错误。
The 'value' should be a valid JavaScript Date instance
我的网站 api 在 asp 获得学生的核心是:
[HttpGet, Route("/api/master/{id}")]
public JsonResult GetStudentById(int id)
{
return Json(new { id = 1, RegisterDate = DateTime.Now });
}
它 returns :
{"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/`, { headers: this.setHeader() })
.subscribe(response => { this.student = response; });
}
查看:
<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 日期实例
不用说了,我已经在 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, or by utilizing the IntlService.parseDate
method (Reference).
@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 文档 (Link)
中找到可能实现的示例