Как я могу изменить формат даты в угловом материале datepicker?

Question

Я хочу изменить формат даты по умолчанию (ГГГГ-ММ-ДД) на другой формат, например (ММ-ДД-ГГГГ).

Это HTML-структура моего календаря.

 <mat-form-field class="full-width">
                        <input matInput [matDatepicker]="picker"
                               [(ngModel)]="currentDay"
                               (dateChange)="currentDayChanged()"
                               required
                               placeholder="date"
                               name="currentDay">
                        <mat-datepicker-toggle matSuffix
                                               [for]="picker">
                        </mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                    </mat-form-field>

Answer 1

Установите в AppModule ваш язык!

Пример для Бразилии,

import { LOCALE_ID } from '@angular/core';

import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt, 'pt-BR');

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [],
    providers: [
      { provide: LOCALE_ID, useValue: 'pt-BR' }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

Об этом есть блог: https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

(в случае, если URL становится недействительным), например, допустим, что вы уже используете Moment.js во всем приложении,Вы можете создать MomentDateAdapter:

Наследовать класс

class MomentDateAdapter extends DateAdapter<Moment> {
  parse(value: any, parseFormat: any): Moment {
    return moment(value, parseFormat);
  }

  // Implementation for remaining abstract methods of DateAdapter.
}

Создайте const, подобный этому, например, в отдельном файле машинописи:

const MOMENT_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    monthYearLabel: 'MMM YYYY',
    // See DateFormats for other required formats.
  },
};

наконец предоставляют обаэти вещи в вашем прикладном модуле

@NgModule({
  imports: [MdDatepickerModule, ...],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MOMENT_FORMATS},
  ],
})
class AppModule {}

Буду признателен, если вы сообщите нам свои результаты.