How to clear mat-datepicker in Angular 5 : <p>How can I clear an Angular Material Datepicker with an button click?</p>

<p>I've tried 
.date
.value
.clear
.reset
.resetDate</p>

<p>None of them seem to clear the Datepicker.</p>

<p>HTML:</p>

<pre><code>  &lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="fromDatePicker" placeholder="From Date" disabled&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="fromDatePicker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #fromDatePicker disabled="false"&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;

  &lt;mat-form-field&gt;
    &lt;input matInput [matDatepicker]="toDatePicker" placeholder="To Date" disabled&gt;
    &lt;mat-datepicker-toggle matSuffix [for]="toDatePicker"&gt;&lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker #toDatePicker disabled="false"&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;

  &lt;button mat-raised-button (click)="resetForm()"&gt;Reset&lt;/button&gt;
</code></pre>

<p>Typescript:</p>

<pre><code>  @ViewChild('fromDatePicker') fromDate: any;
  @ViewChild('toDatePicker') toDate: any;

  resetForm() {
    this.searchString.nativeElement.value = "";
    this.fromDate.value = undefined;

    this.fromDate.date = null;
    this.toDate.date = undefined;

  };
</code></pre>
