代码之家 › 专栏 › 技术社区 › Blake Rivell

将日期绑定到角日期选择器组件的Kendo UI

kendo-ui-angular2 typescript angular javascript

Blake Rivell · 技术社区 · 6 年前

我得到一个“value”应该是一个有效的JavaScript日期实例。”尝试绑定到日期选择器或时间选择器组件的Kendo UI时出错。 There is a page in the Kendo Docs 这就谈到了如何处理这种情况,但我没有把它应用到我的情况。

我正在从服务器接收数据并放入typescript对象:

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"

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>

1 回复 | 直到 6 年前

SiliconSoul 6 年前

这种方法似乎不太可靠。日期构造函数可以将日期从数字创建为从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;
}