Angular Material DatePicker's input shifts month and day after typing

问题

I'm developing a app using Ionic 4/Angular 7 and Angular Material 7.2.1.

The app uses brazilian date format DD/MM/YYYY.

When I select the date with the datepicker itself the text in the input is fine.

But, after type the date in the datepicker's (on blur) input, the month and day are switched. For example, if I type 03/02/2015, after a blur event, the input will show 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 { }

In app.component I do:

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

How could I set the mat-datepicker so that it recognizes the date format typed in the input?

回答1:

Unfortunately not solved yet. I removed the calendar and am using a input with Angular 2 text mask and inputmode="numeric".

来源：https://stackoverflow.com/questions/54129342/angular-material-datepickers-input-shifts-month-and-day-after-typing

标签

datepicker

format

angular-material

locale

mat-input