title: angular material datepicker output
body: <p>I've reviewed the documentation on the Angular material datepicker and it didn't work to change to the output. I used some answers here on stackoverflow but they still only changed the displayed format. As you can see in the picture I am unable to change the datepicker output from Mon Feb 11 to the format in the datepicker's input field 11-02-2019 <a href="https://i.stack.imgur.com/vIzxD.png" rel="nofollow noreferrer">example</a>. How do I get it to output the format as shown on the datepicker input line instead of Mon Feb 11 and remove the time value attached.</p>
  
  <p>Here is my component.ts so far:</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  import {DateAdapter,NativeDateAdapter,MAT_DATE_FORMATS,MAT_DATE_LOCALE} from "@angular/material/core";
  import * as moment from "moment";
  import { DatabaseService } from 'src/app/database.service'
  import { Observable } from 'rxjs';
  const CUSTOM_DATE_FORMATS = {parse: {dateInput: { month: "short", year: "numeric", day: "numeric" }},
  display: {
  dateInput: "input",
  monthYearLabel: { year: "numeric", month: "short" },
  dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
  monthYearA11yLabel: { year: "numeric", month: "long" }}};
  const dateFormat = "DD-MM-YYYY";
  class AppDateAdapter extends NativeDateAdapter {format(date: Date, displayFormat: Object): string {
  if (displayFormat === "input") {return moment(date).format(dateFormat);}else {
    return date.toDateString();}}}
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
  
    providers: [
       { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
       { provide: DateAdapter, useClass: AppDateAdapter }
  ]
  })
  export class DashboardComponent implements OnInit {
  get data(): string {
  return this.databaseService.serviceData;
  }
  set data(value: string) { 
  this.databaseService.serviceData = (value);  } 
  
  @Input() placeholder;
  @Output() onFilter: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  @Input() selectedValue;
  @Output() selectedValueChange: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  
  private _selectedValue;
  
  constructor(public databaseService: DatabaseService){}
  
  ngOnInit() {
  this._selectedValue = this.data;}
  
  onChange($event) {
  this.selectedValue = this.updateDate($event.value);
  this.onFilter.emit(this.data);}
  
  updateDate(date) {
  let formatedDate;
  if (date !== undefined) {
    formatedDate = moment(date).format(dateFormat);
  }
  this.selectedValueChange.emit(formatedDate);
  return formatedDate;
     }
  
  }
  </code></pre>
  
  <p>And my html:</p>
  
  <pre><code>&lt;div style="top: 50%; position: absolute;"&gt;
    &lt;mat-form-field class="datepicker"&gt;
      &lt;input matInput [matDatepicker]="picker" [(ngModel)]= data&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker touchUi #picker&gt;&lt;/mat-datepicker&gt;
    &lt;/mat-form-field&gt;  
   &lt;h2 &gt;Data from A: {{ data }} &lt;/h2&gt; 
   &lt;input [(ngModel)] = data/&gt;
   &lt;a [routerLink]="['/**']"&gt;Go to B&lt;/a&gt; 
  &lt;/div&gt;
  </code></pre>