The 'value' should be a valid JavaScript Date instance

Question

i'm working on a asp.net - angular 5 web application, I need to load a component with empty fields to fill, some of this fields are KendoDatePicker (for Angular), I need to choose if select(insert) or not a date, when I load the component Date is undefined and I've got this error:

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.

Now, I've read the documentation and try this stackblitz example perfectly working:

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
    <div class="example-config">
        Selected value is: {{exampleDate| kendoDate:'MM/dd/yyyy'}}
    </div>
    <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
            [(ngModel)] = "exampleDate"
            placeholder="inserisci una data..."
        ></kendo-datepicker>
    </div>
    `
  })
export class AppComponent {
 public exampleDate: Date;

   constructor()
   {
    //undefined (as I want before the selection, browser consolle does not 
    return error)
    console.log(this.exampleDate);
   }
 }

That's what I've got in my project (component.ts):

DatiGeneraliDocumento_Data: Date;

And component.html

  <div class="alto5">

            <kendo-datepicker
                              [(ngModel)]="_fatturaCorrente.DatiGeneraliDocumento_Data" 
                              name="DataDocumento" style="width:100%;" 
                              placeholder="Inserisci una data...">
              <kendo-datepicker-messages today="OGGI"></kendo-datepicker-messages>
            </kendo-datepicker>

         <div class="cl"></div>
        </div>

So, in my project I've got the aforementioned error and I would like to eliminate it, thanks in advance.

Answer 1

I had to fix it like this...

if (employeeModel.dateOfBirth != undefined) {
    employeeModel.dateOfBirth = new Date(employeeModel.dateOfBirth);        
}