Angular Material DatePicker 的输入在键入后按月和日发生变化 [英] Angular Material DatePicker's input shifts month and day after typing

问题描述

我正在使用 Ionic 4/Angular 7 和 Angular Material 7.2.1 开发应用.

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

该应用使用巴西日期格式 DD/MM/YYYY.

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.

但是，在日期选择器的(模糊时)输入中键入日期后，月份和日期会切换.例如，如果我输入 03/02/2015，在模糊事件之后，输入将显示 02/03/2015.

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:

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 中:

In app.component I do:

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

如何设置 mat-datepicker 以识别输入中键入的日期格式?

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

推荐答案

很遗憾还没有解决.我删除了日历并使用了带有 Angular 2 文本掩码和 inputmode="numeric" 的输入.

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

这篇关于Angular Material DatePicker 的输入在键入后按月和日发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！