title: Date formats with Angular Material
body: <p>I have a working Datepicker with Angular Material but I want to format its date in Hungarian date notation. For example today it's 2019.01.25. Currently the datepicker's format is 25/01/2019. I tried using examples from StackOverflow and Google but instead of my format it shows Fri Jan 25 2019. What is the problem?</p>
  
  <p>app.module.ts</p>
  
  <pre><code> import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { ReactiveFormsModule, FormsModule } from '@angular/forms';
  import { ServerService } from './server.service';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  
  import {
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MAT_NATIVE_DATE_FORMATS,
    DateAdapter
  } from '@angular/material';
  
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  
  import { CustomDateAdapter} from './app.customdateadapter';
  
  const MY_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'},
    }
  };
  
  @NgModule({
    exports: [
      MatButtonModule,
      MatFormFieldModule,
      MatInputModule,
      MatRippleModule,
      MatAutocompleteModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      FormsModule,
      HttpModule,
      MatDatepickerModule,
      MatNativeDateModule
    ],
    declarations: [],
    imports: []
  })
  export class MaterialModule {}
  
  @NgModule({
    declarations: [],
    imports: [],
    exports: [MatDatepickerModule, MatNativeDateModule],
    providers: [
       {
          provide: DateAdapter, useClass: CustomDateAdapter
       },
       {
          provide: MAT_NATIVE_DATE_FORMATS, useValue: MY_DATE_FORMATS
       }
    ]
  })
  
  export class DatePickerModule {
  
  }
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      MaterialModule,
      BrowserModule,
      DatePickerModule
    ],
    providers: [ServerService],
    bootstrap: [
      AppComponent,
    ],
    schemas: [],
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.customdateadapter.ts</p>
  
  <pre><code>import { NativeDateAdapter } from '@angular/material';
  
  export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
       if (displayFormat === 'input') {
          const day = date.getUTCDate();
          const month = date.getUTCMonth() + 1;
          const year = date.getFullYear();
  
          return `${year}.${month}.${day}`;
       } else {
          return date.toDateString();
       }
    }
  
  }
  </code></pre>