CODEWITHSUNDEEP
javascriptangulartypescriptdatepickerangular-material2
esquarial
esquarial

Reputation: 287

Error: Datepicker: value not recognized as a date object by DateAdapter

From yesterday i'm struggling with a problem with angular material 2 datepicker, before last npm install it was working properly and now i get: 

ERROR Error: Datepicker: value not recognized as a date object by DateAdapter.
HolidayRequestComponent.html:21

21st line is where my <input starts

<md-input-container [formGroup]="dateRangeForm">
  <input
   mdInput
   name="date_from"
   [mdDatepicker]="from"
   placeholder="Start date"
   formControlName="holidayDataControl"
   [ngModel]="date_from"
  >
<md-datepicker-toggle mdSuffix [for]="from"></md-datepicker-toggle>
</md-input-container>
<md-datepicker #from></md-datepicker>

My component.ts:

import {Component, OnInit, Inject } from '@angular/core';
import {MD_DIALOG_DATA, MdDialog } from '@angular/material';
import {FormBuilder, FormControl, FormGroup, NgForm, Validators} from '@angular/forms';
import {Observable} from 'rxjs/Observable';


@Component({
  selector: 'app-holiday-request',
  templateUrl: './holiday-request.component.html',
  styleUrls: ['./holiday-request.component.css']
})

export class HolidayRequestComponent implements OnInit {

  public date_from = new Date();

  constructor(@Inject(MD_DIALOG_DATA) public data: any,
              private fb: FormBuilder,
              ) {

      this.dateRangeForm = new FormGroup({
        holidayDataControl: new FormControl('', Validators.required)
      });

      }
  }

Upvotes: 3

Views: 2425

Answers (1)

esquarial
esquarial

Reputation: 287

According to https://github.com/angular/material2/issues/6265

an empty string is not an acceptable value and it is raising the following error:

Datepicker: value not recognized as a date object by DateAdapter.

so the solutions is to change 

this.dateRangeForm = new FormGroup({
        holidayDataControl: new FormControl('', Validators.required)
      });

to

this.dateRangeForm = new FormGroup({
        holidayDataControl: new FormControl(null, Validators.required)
      });

Upvotes: 7

Related Questions