Question

我有一个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"
}

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对象，您只需要在管道中使用IntlService parseDate，就可以在 initializeForm 中进行订阅，而不必在 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 Grid中的日期格式也将起作用。

文档：here

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

1 个答案: