Формат ввода углового материала Datepicker - PullRequest
Новая
       52

Формат ввода углового материала Datepicker

1 голос
/ 27 сентября 2019

При выборе даты с помощью средства выбора даты все отлично работает, отображая дату в нужном формате: DD/MM/AAAA

Но при вводе даты вручную в формате DD/MM/AAAA средство выбора даты автоматически меняет датудо MM/DD/AAAA, определяя первое значение DD как месяц.

Как сделать так, чтобы ручной ввод определялся как DD/MM/AAAA, а не MM/DD/AAAA?

Спасибо!

<mat-form-field class="datepickerformfield" floatLabel="never">
    <input matInput class="dp" formControlName="fpresentaciondesde" [matDatepicker]="picker5" placeholder="DD/MM/AAAA" required>
    <mat-datepicker-toggle matSuffix [for]="picker5"></mat-datepicker-toggle>
    <mat-datepicker #picker5></mat-datepicker>
</mat-form-field>

1 Ответ

1 голос
/ 27 сентября 2019

Вам необходимо создать специальный адаптер даты, например: 

export class CustomDateAdapter extends NativeDateAdapter {

    parse(value: any): Date | null {

    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
       const str = value.split('/');

      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);

      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  format(date: Date, displayFormat: Object): string {
    date = new Date(Date.UTC(
      date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(),
      date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
    displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });

    const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
    return dtf.format(date).replace(/[\u200e\u200f]/g, '');
  }

}

, а затем использовать его в своем приложении: 

@NgModule({
    ....
    providers: [
        { provide: DateAdapter, useClass: CustomDateAdapter }
    ]
})

DEMO

...