#javascript #angular #date #angular-material #datepicker
#язык JavaScript #угловой #Дата #угловой материал #выбор даты
Вопрос:
Мне нужно установить входной и отображаемый формат «ДД-ММ-ГГГГ» в датапикере углового материала. Так, например, 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 { }
Как установить формат для Углового датапикера материалов?