How to clear mat-datepicker in Angular 5

You must query for the matInput element.

component.ts

@ViewChild('fromInput', {
  read: MatInput
}) fromInput: MatInput;

@ViewChild('toInput', {
  read: MatInput
}) toInput: MatInput;

resetForm() {
  this.fromInput.value = '';
  this.toInput.value = '';
}

component.html

<mat-form-field>
  <input #fromInput matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input #toInput matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled>
  <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #toDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

<button mat-raised-button (click)="resetForm()">Reset</button> 

Live demo

HTML

  <mat-datepicker (opened)="resetPicker()" class="mat-datepicker" #picker></mat-datepicker>

TS

  @ViewChild(MatDatepicker)
  picker: MatDatepicker<Moment>;

  resetPicker() {
    this.picker.select(undefined);
  }