When attempting to bind to a Kendo UI Datepicker or Timepicker component, I encounter an error stating "The 'value' should be a valid JavaScript Date instance." Despite referencing a page in the Kendo Docs that addresses this issue, I am struggling to implement the solution in my specific case.
The server sends data that I store in my TypeScript object:
export interface Event {
id: number;
name: string;
date: Date;
startTime: Date;
endTime?: Date;
}
During debugging, the values appear as follows in the TypeScript object:
id:1
name:"Event 1"
date:"2018-11-01T00:00:00"
startTime:"2018-11-01T08:30:00"
endTime:"2018-11-01T10:30:00"
Here is my component.ts file (if I use this.event = this.parse(data.event), the binding works without errors, but non-date fields are transformed into random dates from the parse function):
...Below are snippets of how my components are structured in the .html file:
<kendo-datepicker [(value)]="event.date" id="date" name="date" style="width: 100%;" (valueChange)="handleChange($event)"></kendo-datepicker>
<kendo-timepicker [(value)]="event.startTime" id="startTime" name="startTime" style="width: 100%;" (valueChange)="handleChange($event)"></kendo-timepicker>
<kendo-timepicker [(value)]="event.endTime" id="endTime" name="endTime" style="width: 100%;" (valueChange)="handleChange($event)"></kendo-timepicker>