Форматы даты с угловым материалом

Question

У меня есть рабочий DatePicker с Angular Material, но я хочу отформатировать его дату в венгерской нотации.Например сегодня это 2019.01.25.В настоящее время формат даты выбирается 25/01/2019.Я попытался использовать примеры из StackOverflow и Google, но вместо моего формата он показывает пт 25 января 2019. В чем проблема?

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

Хорошо, значит, у вас есть объект. Вы не можете сравнить это с простой строкой. Вместо этого попробуйте этот способ и проверьте, присутствует ли поле year. Таким образом, вы можете быть уверены, что имеете правильный объект:

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

или с вашим форматом даты

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