title: How to format material datepicker date value to "MM-DD-YYY" format in Angular 6?
body: <p>I am trying to format below date to following format MM-DD-YYYY in Angular 6. I had a look at simpler issues posted in SO and other sites as well but I am unable to resolve it.</p>
  
  <p>I am using Material <a href="https://material.angular.io/components/datepicker/overview" rel="nofollow noreferrer">Angular DatePicker</a> component. </p>
  
  <p>Date picker gives me </p>
  
  <pre><code>Thu Oct 25 2018 00:00:00 GMT+0400 (Gulf Standard Time)
  </code></pre>
  
  <p>I want to format it to </p>
  
  <pre><code>MM-DD-YYYY
  </code></pre>
  
  <p>My code</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput [min]="minDate" [matDatepicker]="date" [(ngModel)]="request.date | request.date: 'dd/MM/yyyy hh:mm a'" placeholder="Choose a date"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="date"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #date&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I also tried with DatePipe module like below but nothing works</p>
  
  <pre><code>this.datePipe.transform(this.request.date,"MM-DD-YYYY")
  </code></pre>