CODEWITHSUNDEEP
datepickerformatangular-materiallocalemat-input
Natanael
Natanael

Reputation: 1346

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?

Upvotes: 2

Views: 3986

Answers (1)

Natanael
Natanael

Reputation: 1346

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

Upvotes: 1

Related Questions