title: Angular Material Datepicker with Moment Adapter: Setting the format of the model value
body: <p>I have an Angular Material Datepicker using <code>momentjs</code> via the <code>MomentDateAdapter</code>. I want to format the value the model receives as <code>YYYY-MM-DD</code>. Currently the value in the model is <code>2019-11-09T05:00:00.000Z</code>.</p>
  
  <p>I am using a custom date format in form control using <code>MAT_DATE_FORMATS</code> to display a verbose date such as <code>November 9, 2019</code>. However this does not affect value that the model receives.</p>
  
  <p>This is the code the sets the format for the form control. I don't see any option to set the format for the model value.</p>
  
  <pre><code>const VERBOSE_DATE_FORMAT = {
    parse: {
      dateInput: ['LL', 'YYYY-MM-DD' ],
    },
    display: {
      dateInput: 'LL',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  }
  
  
  @Component({
    ...
    providers: [
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        {provide: MAT_DATE_FORMATS, useValue: VERBOSE_DATE_FORMAT},
      ]
  })
  ...
  </code></pre>
  
  <p>I tried using <code>(dateInput)="onDateChange($event)"</code>. That exposes <code>MatDatepickerInput</code> component via <code>$event.target</code>. The <code>$event.target.value</code> is a <code>Moment</code> object. I tried setting that value with <code>$event.target.value = $event.target.value.format('YYYY-MM-DD')</code> but that did not affect the model.</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput [matDatepicker]="date"
          placeholder="Date"
          #date="ngModel"
          [(ngModel)]="item.date"
          name="date"
          autocomplete="off" 
          (dateInput)="onDateChange($event)"
      &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;
  
  
  onDateChange( $event ) {
      const formatted = $event.value.format('YYYY-MM-DD')
      $event.target.value = formatted
  }
  </code></pre>
  
  <p>I want <code>item.date</code> to be <code>2019-11-09</code>. How can I achieve that?</p>