Binding date value to Angular Kendo Date Picker Typescript

Question

I have an API which returns the date in this format 2018-12-24T16:00:00.000Z (ISO string). I am using Angular, Kendo UI and Typescript.

The problem that I am facing is the date is not getting bound to the Kendo date picker. I have read the documentation to integrate with JSON but I failed to apply it to my circumstances. And most of the solution in the Google use Javascript.

API call

"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>

Upon using {{ myForm.value | json }} (output) to see the data, the 2018-12-24T16:00:00.000Z value can be displayed, however is not displayable by the date picker.

How do I change this ISO string and make it readable by the date picker?

Answer 1

So... I managed to solve this somehow. In order to convert ISO string to JS object, you just need to use IntlService parseDate it in the pipe subscribe in your initializeForm NOT in your ngOnInit. Here is an example on how I do it:

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),
          })
        })
      ])
    });
}

And don't forget to import:

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

And add them in your constructor:

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

By doing this, your date formatting in Kendo Grid will also work too.

Documentation: here