将日期值绑定到 Angular Kendo Date Picker Typescript答案

【问题标题】：Binding date value to Angular Kendo Date Picker Typescript将日期值绑定到 Angular Kendo Date Picker Typescript
【发布时间】：2018-12-29 08:39:52
【问题描述】：

我有一个 API 以 2018-12-24T16:00:00.000Z（ISO 字符串）这种格式返回日期。我正在使用 Angular、Kendo UI 和 Typescript。

我面临的问题是日期没有绑定到 Kendo 日期选择器。我已阅读文档以与 JSON 集成，但未能将其应用于我的情况。而且 Google 中的大多数解决方案都使用 Javascript。

API 调用

"valueJson": {
    "startDate": "2018-12-24T16:00:00.000Z"
}

组件.ts

constructor(private fb: FormBuilder,
            private service: PromotionsService, ) {
    this.date = new Date();
}

ngOnInit() {
    this.myForm = this.fb.group({
      code: ["", [Validators.required]],
      name: "Please Select",
      customFieldDtoList: this.fb.array([
        this.fb.group({
          paramName: "details",
          valueJson: this.fb.group({
            category: "Please Select",
            startDate: this.date,
            endDate: this.date,
            values: 0
          }),
          updatedDate: this.date
        })
      ])
    });
  }

component.html

<div class="col-6" formArrayName='customFieldDtoList'>
          <div formGroupName=0>
          <div formGroupName="valueJson">
            <p>Start Date</p>
            <kendo-datepicker formControlName="startDate" style="width: 100%;" ></kendo-datepicker>
          </div>
          </div>
      </div>

使用{{ myForm.value | json }} (output) 查看数据时，2018-12-24T16:00:00.000Z 值可以显示，但日期选择器无法显示。

如何更改此 ISO 字符串并使其可供日期选择器读取？

【问题讨论】：

标签： angular typescript kendo-ui datepicker kendo-datetimepicker

【解决方案1】：

所以...我设法以某种方式解决了这个问题。为了将 ISO 字符串转换为 JS 对象，您只需要在 initializeForm 而不是 ngOnInit 的管道订阅中使用 IntlService parseDate 它。这是我如何做的一个例子：

initializeForm() {
this.service
  .getspecificPromotion(this.id)
  .pipe(map(x => x.data))
  .subscribe(resp => {
    const {
      customFieldDtoList: [
        {
          valueJson: {
            startDate,
            endDate,
          }
        }
      ]
    } = resp;

    this.myForm = this.fb.group({
      customFieldDtoList: this.fb.array([
        this.fb.group({
          valueJson: this.fb.group({
            category: category,
            startDate: this.intl.parseDate(startDate),
            endDate: this.intl.parseDate(endDate),
          })
        })
      ])
    });
}

别忘了导入：

import { IntlService } from '@progress/kendo-angular-intl';

并将它们添加到您的构造函数中：

constructor(
    private service: PromotionsService,
    private intl: IntlService
  ) {}

通过这样做，您在 Kendo Grid 中的日期格式也将起作用。

文档：here

【讨论】：