angular - 使用 Angular Material 日期选择器自动格式化日期输入

Question

是否可以从角度材料自动格式化日期选择器输入中的日期（时刻）？

我的用例是让用户在输入中键入日期“DDMMYYYY”，如果它是“fr-FR”区域设置的有效日期，则格式与直接使用日历时相同，因此“DD/MM/ YYYY”。示例：03052018 > 03/05/2018

我想为我的应用程序的所有日期选择器做这件事，所以我想知道它是否可以通过扩展MomentDateAdapter或类似的东西来实现？实际上我使用(dateChange)事件手动完成并绑定const formatedValue = moment(value, 'DDMMYYYY', 'fr-FR');到输入

提前致谢 ！

ps：来自角度材料文档的日期选择器

标签： angularangular-materialmomentjsangular-material2

Answer 1

最后我使用了一个指令：

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;
  }
}