How to pick date range in angular material 5.0.0 with datepicker?

Recommend to check out Saturn Material range Datepicker. Have a look also at their demo page. It is a full Material UX with built-in support for your existing Material theme.

You can install it with npm install saturn-datepicker. See their Github page for full integration instructions.

Markup looks like this:

  <mat-form-field>    <input matInput        placeholder="Choose a date"        [satDatepicker]="picker"        [value]="date">    <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>    <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>  </mat-form-field>

And here is what it ends up looking like on the page:

There's currently no possible way to select a range of dates, although there's an issue requesting so.

In the mean time you could just have two date pickers. One for the start date and one for the end date. Something like this:

<mat-form-field> //start date datepicker  <input matInput [min]="minDate" [max]="maxDate" [formControl]="startDate" [matDatepicker]="picker" placeholder="Choose a start date">  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>  <mat-datepicker #picker startView="year" [startAt]="minDate"></mat-datepicker></mat-form-field><mat-form-field> //end date datepicker  <input matInput [min]="startDate" [max]="maxDate" [formControl]="endDate" [matDatepicker]="picker" placeholder="Choose a date">  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker></mat-form-field>

You could then have some where if they change the endDate to something before the startDate it shows them an error or resets the startDate