Binding date value to Angular Kendo Date Picker Typescript












0















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?










share|improve this question





























    0















    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?










    share|improve this question



























      0












      0








      0








      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?










      share|improve this 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?







      angular typescript kendo-ui datepicker kendo-datetimepicker






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 29 '18 at 10:52









      marc_s

      573k12811071255




      573k12811071255










      asked Dec 29 '18 at 8:39









      Adibah Hanun Abu SemanAdibah Hanun Abu Seman

      33




      33
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53968024%2fbinding-date-value-to-angular-kendo-date-picker-typescript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            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






            share|improve this answer




























              0














              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






              share|improve this answer


























                0












                0








                0







                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






                share|improve this answer













                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







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 30 '18 at 17:33









                Adibah Hanun Abu SemanAdibah Hanun Abu Seman

                33




                33






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53968024%2fbinding-date-value-to-angular-kendo-date-picker-typescript%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas