Блог

Мне нужно установить входной и отображаемый формат «ДД-ММ-ГГГГ» в датапикере углового материала. Так, например, 1 декабря должно быть введено и отображено как «01.12.2021».

Когда я устанавливаю дату с помощью кнопки переключения «Мат-дата», она работает правильно. Но когда я пишу дату «01.12.2021» с клавиатуры, она меняется на «12.01.2021».

HTML:

 lt;mat-date-range-input [rangePicker]="picker"gt;  lt;input matStartDate placeholder="Start date" (dateInput)="inputEvent($event)" (dateChange)="changeEvent($event)"gt;  lt;input matEndDate placeholder="End date" (dateInput)="inputEvent($event)" (dateChange)="changeEvent($event)"gt;  lt;/mat-date-range-inputgt;  lt;mat-datepicker-toggle matSuffix [for]="picker"gt;lt;/mat-datepicker-togglegt;  lt;mat-date-range-picker #pickergt;lt;/mat-date-range-pickergt;  

Приложение.module.ts:

 import { MatDatepickerModule } from '@angular/material/datepicker'; import { MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core'; import { MAT_DATE_FORMATS } from '@angular/material/core'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field';  registerLocaleData(localeRu);  export const MY_FORMATS = {  parse: {  dateInput: 'DD-MM-YYYY',  },  display: {  dateInput: 'DD-MM-YYYY',  monthYearLabel: 'YYYY',  dateA11yLabel: 'LL',  monthYearA11yLabel: 'YYYY',  }, };   @NgModule({  declarations: [  ...  ],  imports: [  ...  MatDatepickerModule,  MatNativeDateModule,  MatFormFieldModule,  MatInputModule,    ],  providers: [  ...  {provide: LOCALE_ID, useValue: 'ru'},  {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},  {provide: MAT_DATE_LOCALE, useValue: 'ru-RU'},  ],  bootstrap: [AppComponent] }) export class AppModule { }  

Как установить формат для Углового датапикера материалов?