Datepicker: Value must be either a date object recognized by the DateAdapter or an ISO 8601 string

[MaurilioDeveloper]

ERROR Error: Uncaught (in promise): Error: Datepicker: Value must be either a date object recognized by the DateAdapter or an ISO 8601 string. Instead got:

The date an error occurred at the time of displaying it, that is, I'm bringing the information from the bank and returning in the input, but the above error occurs.

[willshowell]

What does you initial value look like? Is it an object? A string?

[MaurilioDeveloper]

The input is returning in your NgModel a Object of type Date. And my search through of Back End, return Type Date.

[ataschz]

I have the problem... whats is the fix?

[willshowell]

@MaurilioDeveloper do you have a custom date adapter? This is where that error is thrown, maybe it'll help you identify,

https://github.com/angular/material2/blob/9fadf12c2941b739aa87e6d741b79dabc919dc61/src/lib/datepicker/coerce-date-property.ts#L12-L35

[MaurilioDeveloper]

Yes, I have. Follow below my code (Custom Date Adapter):

/** Adapts the native JS Date for use with cdk-based components that work with dates. */
export class CustomDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');

      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);

      return new Date(year, month, date);
    }

    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  // retirar quando for feito o merge da data por mmalerba
  format(date: Date, displayFormat: Object): string {
    date = new Date(Date.UTC(
      date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(),
      date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
    displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });

    const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
    return dtf.format(date).replace(/[\u200e\u200f]/g, '');
  }

  
}

`

I import my CustomDateAdapter on the module :
{ provide: LOCALE_ID, useValue: 'pt-BR' },
{ provide: DateAdapter, useClass: CustomDateAdapter },

[MaurilioDeveloper]

I solved this problem. Thanks for your help @willshowell. I only convert the Date Json (That was returning) to Date, and it worked.

[kuncevic]

new Date(<your_date_string>); should help.

[mcanelo]

@MaurilioDeveloper But, i don't understand. If i need the datepicker show a date in format 'DD/MM/YYYY', what i have to pass in [min] parameter to get this format? Or i have to call some of this funcions parse() format() ?
And, what is the second parameter of 'format' funcion?

my code

`
<input matInput [min]="defaultDate"
[matDatepicker]="picker"
(focus)="picker.open()"
(click)="picker.open()"
readonly="true"
name="date"
required
ngModel
#date="ngModel"
[value]="defaultDate">
<mat-datepicker-toggle mdSuffix [for]="picker">

------------------------------------------------------------------------------------------------------------`

ngAfterViewInit() {
this.defaultDate = new Date();
}

---

RESULT OF THIS (in input of datepicker):

'Tue Oct 17 2017 17:00:44 GTM+0200 (CEST)

But, if i change the date, the format will be 'DD/MM/YYYY'

thanks!!

[costea93]

The same problem, do you have guys any solutions how to fix that?

[mmalerba]

@mcanelo That's a bug with the [value] binding that will be fixed by #7831 you can workaround by using [fromControl] or [ngModel]. Also the NativeDateAdapter doesn't support DD/MM/YYYY so you'll need to use the MomentDateAdapter or a custom one

[mcanelo]

@mmalerba yeah, solved! thanks so much :)

[mansonkibe]

@mcanelo how did you solve it. Am getting the following error
Error: Datepicker: Value must be either a date object recognized by the DateAdapter or an ISO 8601 string. Instead got: 2017-10-31T08:37:07.000Z

Am using reactive form where i have a service that is returning data from backend.

snippet of the component

<mat-form-field class="form-group label-floating"> <input matInput [matDatepicker]="picker2" placeholder="Date After Distribution" formControlName="dateAfterDistribution"> <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle> <mat-datepicker #picker2 ></mat-datepicker> </mat-form-field>

snippet of ts file

this.beneficiaryList.dateAfterDistribution;//interface is of type date this.stoveForm.patchValue({ 'dateAfterDistribution': this.dateAfterDistribution })

[mcanelo]

@mansonkibe

my code:

in app.module.ts

import { DateAdapter } from '@angular/material';
import { NativeDateAdapter } from '@angular/material';

`export class MyDateAdapter extends NativeDateAdapter {

format(date: Date, displayFormat: Object): string {

    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();

    return `${day}/${month}/${year}`;
}

}`

imports: [
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule
],

---

in component.ts

first:
import { DateAdapter } from '@angular/material';

inject in constructor:
constructor( private dateAdapter: DateAdapter<Date> ) {}

ngAfterViewInit() { this.defaultDateInit = this.dateAdapter.today(); this.initDate = this.dateAdapter.today(); }

---

template:
<mat-form-field class="custom-calendar"> <input matInput [min]="defaultDateInit" [matDatepicker]="pickerInit" name="dateInitText" id="dateInitText" [(ngModel)]="initDate" #dateInitText="ngModel"> <mat-datepicker #pickerInit></mat-datepicker> </mat-form-field>

i hope you can solve it :)