Date formats with Angular Material

Question

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?

app.module.ts

 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 { }

app.customdateadapter.ts

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();
     }
  }

}

Answer 1

Okay, so you have an object. You can't compare it to a plain string. Try it this way instead and check, whether the field year is present. Thus, you can be sure to have the right object:

import { NativeDateAdapter } from '@angular/material';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: any): string {
     if (displayFormat.year) {
        return displayFormat.year + '.' + displayFormat.month + '.' + displayFormat.day;
     } else {
        return date.toDateString();
     }
  }
}

or with your date format

import { NativeDateAdapter } from '@angular/material';

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: any): string {
     if (displayFormat.year) {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();

        return year + '.' + month + '.' + day;
     } else {
        return date.toDateString();
     }
  }
}