将日期绑定到Angular DatePicker组件的Kendo UI

Question

我收到一个“'值'应该是有效的JavaScript日期实例”。 尝试绑定到Datepicker或Timepicker组件的Kendo UI时出错。 Kendo Docs中有一个页面讨论如何处理这种情况，但是我无法将其应用于我的情况。

我正在从服务器接收数据并放入我的打字稿对象：

export interface Event {
  id: number;
  name: string;
  date: Date;
  startTime: Date;
  endTime?: Date;
}

调试打字稿对象时，这些值最终看起来如下所示：

id:1
name:"Event 1"
date:"2018-11-01T00:00:00"
startTime:"2018-11-01T08:30:00"
endTime:"2018-11-01T10:30:00"

下面是我的component.ts（如果我执行this.event = this.parse（data.event），我没有收到任何错误，并且似乎可以正常工作，但是我所有不是日期的字段都从parse函数变成了随机日期：

ngOnInit() {
    if (!(this.route.snapshot.url[0].path === 'new')) {
      this.isUpdating = true;
      this.route.data
        .subscribe((data: { event: Event }) => {
          this.event = data.event;
        });
    }
  }
      public handleChange(value: Date) {
        this.event.startTime = new Date(this.intl.formatDate(value, 'yyyy-MM-dd HH:mm:ss'));
        this.event.endTime = new Date(this.intl.formatDate(value, 'yyyy-MM-dd HH:mm:ss'));
        this.event.date = new Date(this.intl.formatDate(value, 'yyyy-MM-dd HH:mm:ss'));
      }

      // A simple method for the string-to-date conversion
      private parse(json) {
        Object.keys(json).map(key => {
          const date = new Date(json[key]);
          if (!isNaN(date.getTime())) { json[key] = date; }
        });

        return json;
      }

以下是.html中我的组件的外观：

<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>

Answer 1

该方法似乎不是很可靠。 Date构造函数可以从数字创建日期（以1970年为单位，以毫秒为单位）。根据浏览器的格式，它也许还可以根据“事件1”字符串创建日期（Chrome似乎可以这样做）。 我在这里看到两个选择。 尝试使用特定格式解析日期字符串：

private parseExact(json) {
    Object.keys(json).map(key => {
      const date = this.intl.parseDate(json[key], 'yyyy-MM-ddTHH:mm:ss');
      if (date) { json[key] = date; }
    });

    return json;
}

或传递日期字段：

private parse(json: any, dateFields: string[]) {
   for (let idx = 0; idx < dateFields.length; idx++) {
       const field = dateFields[idx]; 
       const value = json[field];
       if (value) {
         json[field] = new Date(value);
       }
   }

   return json;
}

https://stackblitz.com/edit/angular-1jujzo?file=app/app.component.ts