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

Answer 2

Have you tried using the safe navigator in your interpolation? i.e:

   <div class="example-config">
        Selected value is: {{exampleDate?| kendoDate:'MM/dd/yyyy'}}
    </div>

I have added a stackblitz. I use Angular's build in DatePipe but it should work the same way for you.

Example

Here is the code for your template:

{{(exampleDate? ('Your date' + exampleDate |kendoDate:'MM-dd-yyyy') : '')}}

Here is what I would put in the component:

exampleDate = new Date(dateVariable);

Answer 3

I encountered the same issue in my application. But when I removed the [(ngModel)] set inside the <kendo-datepicker> directive, it fixed itself.

I used the (onChange) event handler on directive to update the ngModel on date select.

Example:

<kendo-datepicker 
    placeholder="YYYY-MM-DD"
    name="exampleDate"
    [format]="'yyyy-MM-dd'"
    (valueChange)="onChange($event)"
    class="form-control"
>
</kendo-datepicker>

onChange(value?: Date): void {
    this.exampleDate= value ? `${this.intl.formatDate(value, 'yyyy-MM-dd')}` : '';
}