title: InvalidPipeArgument: 'Invalid Date' for pipe 'DatePipe'
body: <p>Error is </p>
  
  <blockquote>
    <p>InvalidPipeArgument: 'Invalid Date' for pipe 'DatePipe'.</p>
  </blockquote>
  
  <p>I want display json data in p-calendar (Primeng component). I am fetching data from json file and display in input field but its not working.</p>
  
  <p>If it possible then please provide solution for p-dropdown and p-radiobutton for display json data in input field</p>
  
  <p>demographic.component.html</p>
  
  <pre><code>&lt;form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)"&gt;
  
  &lt;div class="ui-fluid"&gt;
  
      &lt;p-panel header="Demograhics"&gt;
  
  
          &lt;div class="ui-inputgroup"&gt;
  
                  &lt;label for="email" class="ui-md-2 control-label"&gt;Birthdate&lt;/label&gt;
  
                      &lt;div class="ui-md-6"&gt;
                          &lt;div class="ui-inputgroup"&gt;
                              &lt;p-calendar [(ngModel)]="date3" formControlName="birthdate"  [monthNavigator]="true" [defaultDate]="defaultdate" [yearNavigator]="true"   yearRange="1950:2030" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"&gt;&lt;/p-calendar&gt; &lt;span style="margin-left:35px"&gt;{{date3|date}}&lt;/span&gt;       
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui-md-4"&gt;     
                          &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['birthdate'].valid&amp;&amp;userform.controls['birthdate'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                          Birthdate is required
                          &lt;/div&gt;                                
                      &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="ui-inputgroup"&gt;
  
                  &lt;label for="password" class="ui-md-2 control-label"&gt;Martial Status&lt;/label&gt;
  
                      &lt;div class="ui-md-6"&gt;
                          &lt;div class="ui-inputgroup"&gt;
                                  &lt;p-dropdown [options]="Martials" formControlName="martialstatus" [(ngModel)]="selectedvalidid5" [style]="{'width':'150px'}" filter="true" name="something" placeholder="MartialStatus"&gt;
                                          &lt;ng-template let-item pTemplate="selectedItem"&gt;
  
  
                                              &lt;span style="vertical-align:middle"&gt;{{item.label}}&lt;/span&gt;
                                          &lt;/ng-template&gt;
                                          &lt;ng-template let-Martial pTemplate="item"&gt;
                                              &lt;div class="ui-helper-clearfix" style="position: relative;height: 25px;"&gt;
  
                                                  &lt;div style="font-size:14px;float:right;margin-top:4px"&gt;{{Martial.label}}&lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/ng-template&gt;
                                      &lt;/p-dropdown&gt;          
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="ui-md-4"&gt;     
                              &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['martialstatus'].valid&amp;&amp;userform.controls['martialstatus'].dirty"&gt;
                                  &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              Martial status is required
                              &lt;/div&gt;
  
  
                      &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-inputgroup"&gt;
  
                  &lt;label for="password" class="ui-md-2 control-label"&gt;Gender&lt;/label&gt;
  
                      &lt;div class="ui-md-6"&gt;
                          &lt;div class="ui-inputgroup"&gt;
                              &lt;p-radioButton name="group2" value="Male" formControlName="gender" label="Male"  [(ngModel)]="val2" inputId="preopt1" name="something"&gt;&lt;/p-radioButton&gt;
                              &lt;p-radioButton name="group2" value="Female" formControlName="gender" label="Female"  [(ngModel)]="val2" inputId="preopt2" name="something"&gt;&lt;/p-radioButton&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui-md-4"&gt;     
                          &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&amp;&amp;userform.controls['gender'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                          Gender is required
                          &lt;/div&gt;
  
  
                  &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class="ui-inputgroup"&gt;
  
                  &lt;div class="ui-md-8 ui-md-offset-4"&gt;
                      &lt;button pButton type="submit" label="Submit" [disabled]="!userform.valid"&gt;&lt;/button&gt;
                          &lt;button pButton type="button" (click)="count()" label="Cancel"&gt;&lt;/button&gt;                           
                  &lt;/div&gt;
          &lt;/div&gt;                     
  
      &lt;/p-panel&gt;
  
  &lt;/div&gt;
  
  &lt;/form&gt;  
  </code></pre>
  
  <p>demographic.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as jwt from 'angular2-jwt/angular2-jwt';
  import { CardModule } from 'primeng/card';
  import { CalendarModule } from 'primeng/calendar';
  import { ScrollPanelModule } from 'primeng/scrollpanel';
  import { Response } from '@angular/http/src/static_response';
  import { CountryService} from './country-list.service';
  import {SelectItem} from 'primeng/api';
  import { Message } from 'primeng/components/common/api';
  import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  import { PersonListService,Person, Demographic} from './person-list.service';
  
  
  @Component({ 
    moduleId: module.id,
    selector: 'sd-demographicform',
    templateUrl: 'demographicform.component.html',
    styleUrls: ['demographicform.component.css']
  })
  export class DemographicFormComponent implements OnInit {
  
  
  
    date3: Date = new Date("{{ demographics?.Birthdate | date:dd.mm.yy }}");
  
    dates: Date[];
  
    rangeDates: Date[];
  
    minDate: Date;
  
    maxDate: Date;
  
    es: any;
  
    invalidDates: Array&lt;Date&gt;
  
    val2: string = 'Male';
  
    val3: string = 'Unmarried';
  
    text: string;
  
    ValidIds: SelectItem[];
  
    selectedvalidid2: string = '';
  
    Religions: SelectItem[];
  
    selectedvalidid3: string = '';
  
    BloodGroups: SelectItem[];
  
    selectedvalidid4: string = '';
  
    Martials: SelectItem[];
  
    selectedvalidid5: string = '';
  
    country: any;
  
    filteredCountriesSingle: any[];
  
    msgs: Message[] = [];
  
    userform: FormGroup;
  
    submitted: boolean;
  
    demographics: Demographic;
  
  
  
    constructor(private countryService: CountryService,private fb: FormBuilder,public personListService:PersonListService) { }
  
    filterCountrySingle(event) {
        let query = event.query;
        this.countryService.getCountries().then(countries =&gt; {
            this.filteredCountriesSingle = this.filterCountry(query, countries);
        });
    }
  
    filterCountry(query, countries: any[]):any[] {
      //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
      let filtered : any[] = [];
      for(let i = 0; i &lt; countries.length; i++) {
          let country = countries[i];
          if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
              filtered.push(country);
          }
      }
      return filtered;
  }
    ngOnInit() {
  
      this.getperson();
      //this.date3.setDate((new Date()).getDate() - 5);
      this.userform = this.fb.group({
          'nationality': new FormControl('', Validators.required),
          'birthdate': new FormControl('', Validators.required),
          'martialstatus': new FormControl('', Validators.required),
          'gender': new FormControl('', Validators.required),
          'height': new FormControl('', Validators.required),
          'valididtype': new FormControl('', Validators.required),
          'valididno': new FormControl('', Validators.required)
  
      }
  );
  
      this.ValidIds = [
        {label: 'Adharcard', value: 'Adharcard'},
        {label: 'Pancard', value: 'Pancard'},
        {label: 'Driving Lincense', value: 'DrivingLincense'},
        {label: 'Passport', value: 'Passport'},
  
    ];
  
    this.Martials = [
      {label: 'Married', value: 'Married'},
      {label: 'Unmarried', value: 'Unmarried'},
      {label: 'Divorced', value: 'Divorced'},
      {label: 'Widowed', value: 'Widowed'},
      {label: 'Separated', value: 'Separated'},
  ];
  
    this.Religions = [
      {label: 'Hindu', value: 'Hindu'},
      {label: 'Islam', value: 'Islam'},
      {label: 'Christianity', value: 'Christianity'},
      {label: 'Sikhism', value: 'Sikhism'},
      {label: 'Buddhism', value: 'Buddhism'},
      {label: 'Jainism', value: 'Jainism'},
  ];
  
  this.BloodGroups = [
    {label: 'A', value: 'A'},
    {label: 'A+', value: 'A+'},
    {label: 'B', value: 'B'},
    {label: 'C', value: 'C'},
    {label: 'AB', value: 'AB'},
    {label: 'O', value: 'O'},
  
  ];
  
         this.es = {
              firstDayOfWeek: 1,
              dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
              dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
              dayNamesMin: [ "D","L","M","X","J","V","S" ],
              monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
              monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ],
              today: 'Hoy',
              clear: 'Borrar'
          }
  
  
          let today = new Date();
          let month = today.getMonth();
          let year = today.getFullYear();
          let prevMonth = (month === 0) ? 11 : month -1;
          let prevYear = (prevMonth === 11) ? year - 1 : year;
          let nextMonth = (month === 11) ? 0 : month + 1;
          let nextYear = (nextMonth === 0) ? year + 1 : year;
  
  
          let invalidDate = new Date();
          invalidDate.setDate(today.getDate() - 1);
          this.invalidDates = [today,invalidDate];
      }
      getperson(){
  
          this.personListService.getDemographic()
          .subscribe(
           resp =&gt; this.demographics = resp.Demographics,
  
            //resp =&gt; this.addresses = resp.Addresses,
  
          );
  
  
     }
      onSubmit(value: string) {
          this.submitted = true;
          this.msgs = [];
          this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
      }
  }   
  </code></pre>
  
  <p>person.json</p>
  
  <pre><code>{
  
  "Demographics" : {
  
              "ProfileId":1,
              "FirstName":"Vinit",
              "LastName":"Mapari",
              "Birthdate":"21/12/1996",
              "MartialStatus":"Unmarried",
              "Gender":"Male",
              "Height":"5ft2inch",
              "ValidIdType":"Pancard",
              "ValidIdNumber":"123",
              "Nationality":"Indian",
              "Religion":"Hindu",
              "BloodGroup":"A",
              "NearestRailwayStation":"Byculla"
  
          }
  } 
  </code></pre>