将日期值绑定到 Angular Kendo 日期选择器打字稿

Question

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

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

API 通话

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

component.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 字符串并使其可被日期选择器读取？

Answer 1

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

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 网格中的日期格式也将起作用。

文档：here

将日期值绑定到 Angular Kendo 日期选择器打字稿

Binding date value to Angular Kendo Date Picker Typescript

datepicker

kendo-ui

typescript

kendo-datetimepicker

angular