Как сделать так, чтобы Angular Material 6 DatePicker с Momentjs конвертировал неверный формат? - PullRequest
Новая
       26

Как сделать так, чтобы Angular Material 6 DatePicker с Momentjs конвертировал неверный формат?

1 голос
/ 06 мая 2019

Я использую Angular Material Datepicker с Momentjs, который помогает мне использовать любые типы делителей для дней, месяцев и годов (например, /, и т. Д.).

Отлично работает при выборе даты и добавлении правильного или почти правильного формата, а именно: ДД / ММ / ГГГГ.

Я включил в свой модуль: 

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'MM/DD/YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

и затем: 

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

Проблема возникает, когда пользователь вводит дату в формате ГГГГ / ММ / ДД, она автоматически конвертируется в ДД / ММ / ГГГГ, и это не должно происходить, так как это будет неправильно.

Как я могу предотвратить это, как я могу помешать Momentjs конвертировать этот формат и сохранить ввод как недействительный?

1 Ответ

1 голос
/ 07 мая 2019

Конфигурация в Angular Material Datepicker не изменяет это поведение. Но вы можете добиться того же, добавив скрытое поле ввода и связав его с указателем даты. Вот пример, как я это сделал.

В HTML файле: 

<mat-form-field>
<input matInput #autocomplete placeholder="Please choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

В файле ts : 

toFormattedDate(iso: string) {
  const date = new Date(iso);
  console.log(date);
  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
}

Посмотрите на мой Пример Stackblitz .

...