Error when i retrieve date from kendo ui date-picker

2 posts, 0 answers
  1. Renato
    Renato avatar
    1 posts
    Member since:
    Jul 2019

    Posted 16 Jul 2019 Link to this post

    I'm trying to store one date in my database with the [Date Picker Component for Kendo Ui][1]

    So, this component format my selected data like this:

    2019-07-23T00:00:00



    I try to catch the return of the saved object and insert in my actual object, but i receive:

    > Error: The 'value' should be a valid JavaScript Date instance. Check
    > http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json
    > for possible resolution.

    My component:
    <kendo-datepicker [(value)]="ReferenciaMktDataDisponivel" ></kendo-datepicker>

    Also tried:

        let dataDisponibilidade = new Date(this.formGroup.get('ReferenciaMktDataDisponivel').value)
              this.formGroup.get('ReferenciaMktDataDisponivel').setValue(dataDisponibilidade)


    My console.log of this date: `2019-07-17T00:00:00`

    Can someone help me ?

      [1]: https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 18 Jul 2019 Link to this post

    Hi Renato,

    The Kendo UI for Angular DatePicker and DateInput components can hold JavaScript Date object values only (i.e. - actual dates, as opposed to some serialized string representations). The recommended approach for binding the Date inputs to serialized data, coming from a remote service (for example) is to map the incoming data first so that the string values are converted to actual Date objects before binding the DatePicker/Input:

    https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/integration-with-json/

    Here is a simple example demonstrating the observed error when the DatePicker is value-bound to a string, and the same DatePicker functioning properly when bound to a JavaScript Date object:

    https://stackblitz.com/edit/angular-mg58qw?file=app/app.component.ts // error when binding to a string

    https://stackblitz.com/edit/angular-mg58qw-cnl6ug?file=app/app.component.ts // no error when binding to a Date

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top