title: How to add mask on angular material date picker
body: <p>I recently started using angular material to build angular form in which i need to use angular material date picker but am not able to add any mask on the input element.</p>
  
  <p>I want to allow the user only to be able to enter numbers and to format them in date format (MM/DD/YYYY) as he types in.</p>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>&lt;div class="example-container"&gt;
    &lt;mat-form-field appearance="outline" class="col-sm-12 col-md-6 col-lg-6 required margin-top-ten"&gt;
      &lt;mat-label&gt;
        &lt;span class="title"&gt;Date of Birth (MM/DD/YYYY)&lt;/span&gt;  
      &lt;/mat-label&gt;
      &lt;input matInput [matDatepicker]="myDatepicker" formControlName="dateOfBirth" maxlength="10"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="myDatepicker"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #myDatepicker&gt;&lt;/mat-datepicker&gt;  
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note:
  I was trying to use <strong>ngx-mask</strong> and is not working on date picker only, on a regular text input like phone or fax fields is working just fine.</p>