title: How to clear mat-datepicker in Angular 5
body: <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>