title: Angular Date Range Picker not able to implement
body: <p>I'm trying to create a date range picker in Angular 7 with the help of angular material. But whenever I click on the calendar, the value is not updated on the input field. I'm sharing my code below. </p>
  
  <p>As, you can see from the code below, I have written a click function on the second input field. On clicking it opens up two calendars, one for start date, other for end date. But, whenever, I try to click on any date, it saves only today's date. Can anyone help me to resolve this issue.</p>
  
  <p>input-overview-example.html</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput [matDatepicker]="strtpicker" [value]="date.value" placeholder="Start Date" &gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field class="ml-20"&gt;
    &lt;input matInput [matDatepicker]="endpicker" [value]="date.value"  placeholder="Choose a date" (click)="dateRange()"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;div class="d-flex" *ngIf="show"&gt;
      &lt;mat-card &gt;
        &lt;p&gt;Start Date&lt;/p&gt;
        &lt;mat-calendar &gt;&lt;/mat-calendar&gt;
      &lt;/mat-card&gt;
     &lt;mat-card&gt;
       &lt;p&gt;End Date&lt;/p&gt;
        &lt;mat-calendar&gt;&lt;/mat-calendar&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>input-overview-example.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {FormControl} from '@angular/forms';
  import {MatDatepickerInputEvent} from '@angular/material/datepicker';
  
  
  
  /**
   * @title Basic Inputs
   */
  @Component({
    selector: 'input-overview-example',
    styleUrls: ['input-overview-example.css'],
    templateUrl: 'input-overview-example.html',
  })
  export class InputOverviewExample {
     events: string[] = [];
       addEvent(type: string, event: MatDatepickerInputEvent&lt;Date&gt;) {
      this.events.push(`${type}: ${event.value}`);
    }
  
    date = new FormControl(new Date());
  
  
    show: boolean;
  
     dateRange() {
      this.show = true;
    }
  
  }
  </code></pre>