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

Question

我在尝试为 Datepicker 或 Timepicker 组件绑定到 Kendo UI 时遇到 "The 'value' should be a valid JavaScript Date instance." 错误。 There is a page in the Kendo Docs 讨论了如何处理这种情况，但我未能将其应用到我的情况中。

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

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

调试 typescript 对象时，值最终如下所示：

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）我没有收到任何错误而且它似乎有效，但所有我的非日期字段变成了解析函数的随机日期：

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 年开始的毫秒偏移量的数字创建日期。根据浏览器格式，它也可以从 "Event 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

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

Binding to a Date to a Kendo UI for Angular DatePicker Component

javascript

typescript

kendo-ui-angular2

angular