2

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?

Natanael
  • 1,326
  • 5
  • 17
  • 34
  • Did you manage to resolve the issue? I am facing the same thing now and I was hoping that you might have found a solution in the meantime. – Máté Széll Feb 19 '19 at 10:29
  • @MátéSzéll there is a solution in this link https://stackoverflow.com/questions/54113765/angular-material-date-picker-input-treat-the-date-as-us-format – nicolascolman Apr 08 '19 at 15:26

1 Answers1

1

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

Natanael
  • 1,326
  • 5
  • 17
  • 34