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

【问题标题】：Binding to a Date to a Kendo UI for Angular DatePicker Component将日期绑定到 Angular DatePicker 组件的 Kendo UI
【发布时间】：2018-08-18 02:53:49
【问题描述】：

我收到“‘值’应该是一个有效的 JavaScript Date 实例。”尝试为 Datepicker 或 Timepicker 组件绑定到 Kendo UI 时出错。 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>

【问题讨论】：

标签： javascript angular typescript kendo-ui-angular2

【解决方案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

【讨论】：