Угловой материал DatePicker смещается месяц и день после ввода

Question

Я разрабатываю приложение, используя Ionic 4 / Angular 7 и Angular Material 7.2.1.

Приложение использует бразильский формат даты ДД / ММ / ГГГГ.

Когда я выбираю дату с помощью самого DatePicker, текст на входе в порядке.

Но после ввода даты в поле ввода даты (при размытии) переключаются месяц и день. Например, если я введу 03.02.2015, после события размытия на входе будет отображаться 02.03.2015.

app.module.ts:

import 'moment/locale/pt-br';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';


const MY_FORMATS = {
    parse: {
      dateInput: 'LL',
    },
    display: {
      dateInput: 'DD/MM/YYYY',
      monthYearLabel: 'MM/YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'YYYY',
    },
  };



@NgModule({
    declarations: [
        AppComponent
    ],
    entryComponents: [],
    imports: [
        // BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule, 
        IonicModule.forRoot(),
        IonicStorageModule.forRoot(),
        AppRoutingModule,
        ProjectMaterialModule,
        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: LOCALE_ID, useValue: 'pt-BR' },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
        //{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
        { provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },

        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

В app.component я делаю:

ngOnInit () {
    moment.locale('pt-BR');
} 

Как я могу установить mat-datepicker так, чтобы он распознавал формат даты, введенный во вход?

Answer 1

К сожалению, еще не решена. Я удалил календарь и использую ввод с текстовой маской Angular 2 и inputmode="numeric".

Answer 2

У меня точно такая же проблема с реактивной формой. Это HTML-код

    <mat-form-field>
        <mat-label>Data di Nascita</mat-label>
        <input formControlName="birthdate" matInput [matDatepicker]="picker" placeholder="gg/mm/aaaa">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

в app.module.ts я разместил

    {provide: MAT_DATE_LOCALE, useValue: 'it-IT'}

Контекст: это часть формы ввода, используемой для создания записи в Firestore, и та же форма используется для получения данных и их отображения пользователю. При использовании этого второго способа он отлично работает, он показывает дату в итальянском формате. Также он отлично работает при создании новой записи, и пользователь "выбирает" дату из раскрывающегося списка. Единственная проблема возникает, когда пользователь фактически "набирает" дату, а затем Datepicker переключает день и месяц. Поэтому, если я наберу "4/3/2020", что в Италии означает 4 марта 2020 года, дата сразу же и по необъяснимым причинам будет переключена на 3/4/2020, как только я уйду с поля.

Это похоже на ошибку matDatepicker...