title: How to pick date range in angular material 5.0.0 with datepicker?
body: <p>I am using the latest <code>Angular Material 5.0.0-rc0</code> in my Angular 5 app. I am trying to select a range of dates with the <code>datepicker</code> provided with Angular material, but I couldn't find any documentation regarding that.</p>
  
  <p>All I could work with it is to select a <code>startDate</code> or set the <code>minDate</code> and <code>maxDate</code>. Here's the HTML code for that</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date"&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #picker startView="year" [startAt]="startDate"&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>and TS code</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'datepicker-start-view-example',
    templateUrl: 'datepicker-start-view-example.html',
    styleUrls: ['datepicker-start-view-example.css'],
  })
  export class DatepickerStartViewExample {
    minDate = new Date(2000, 0, 1);
    maxDate = new Date(2020, 0, 1);
  }
  </code></pre>
  
  <p>This code helps me select one date in the range of those min and max dates but doesn't allow to select a range of them. Though using a third-party library may solve this problem, but its gonna have a different UI, which is going to be different from my current app's UI. Please help me solve this issue.</p>