0

我有一个 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
        })
      ])
    });
  }

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

4

1 回答 1

1

所以......我设法以某种方式解决了这个问题。为了将 ISO 字符串转换为 JS 对象，您只需要parseDate在管道中使用 IntlService 它在您的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 中的日期格式也将起作用。

文档：这里

于 2018-12-30T17:33:21.483 回答