Автоматический ввод даты в формате Angle Material - PullRequest
Новая
       7

Автоматический ввод даты в формате Angle Material

0 голосов
/ 03 мая 2018

Можно ли автоматически форматировать дату (момент) при вводе средства выбора даты из углового материала?

Мой вариант использования позволяет пользователю вводить дату "DDMMYYYY" во входных данных и, если это допустимая дата для локали "fr-FR", форматировать так же, как при непосредственном использовании календаря, поэтому "DD / MM / YYYY». Пример: 03052018> 03/05/2018

Я хочу сделать это для всех средств выбора даты в моем приложении, поэтому я хотел бы знать, можно ли этого достичь путем расширения MomentDateAdapter или чего-то подобного? На самом деле я делаю это вручную с событием (dateChange) и привязкой const formatedValue = moment(value, 'DDMMYYYY', 'fr-FR'); к входу

Заранее спасибо!

ps: Datepicker из документации по угловым материалам

1 Ответ

0 голосов
/ 14 мая 2018

Наконец я использовал директиву: 

import { Directive, ElementRef, HostListener } from '@angular/core';
import * as moment from 'moment';

@Directive({
  selector: '[appFormatDate]'
})
export class FormatDateDirective {
  constructor(private el: ElementRef) {}

  @HostListener('blur')
  onBlur() {
    const inputValue = this.el.nativeElement.value;
    console.log(inputValue);

    if (inputValue !== '') {
      this.formatDate(inputValue);
    }
  }

  formatDate(value: string) {
    const momentDate = moment(value, ['DDMMYYYY', 'D MMMM YYYY'], 'fr-FR'); // Ex : [01012018, 1 janvier 2018]
    const formatedValue = momentDate.isValid() ? momentDate.format('DD/MM/YYYY') : value;
    console.log(formatedValue);
    this.el.nativeElement.value = formatedValue;
  }
}
...