Angular Material 日期选择器自定义格式

Question

我创建了一个自定义指令来向现有的 matDatePicker 控件添加功能。该指令有一个名为 format 的输入属性，它在运行时给出日期格式。我已经提供了 MyDateAdapter 中提到的 Angular 2 Material 2 datepicker date format

我的问题是；我如何在运行时将输入格式值设置为 datepicker 日期格式，作为我的格式值发生更改的时间。

我的指令:

@Directive({
  selector: '[dateFormat]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: DateFormatDirective,
      multi: true
    },
    {
      provide: DateAdapter, useClass: MyDateAdapter
    },
    {
      provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
    }
  ]
})
export class DateFormatDirective {
  @Input('dateFormat') format: string;
}

MyDateAdapter 类和 MY_DATE_FORMATS 常量 refer

Answer 1

在查看 Material 日期选择器和 NativeDateAdapter 源代码后，我找到了上述问题的解决方案。

修改MyDateAdapter

import {TranslateService} from '@ngx-translate/core';
export class MyDateAdapter  extends NativeDateAdapter {
    format:string;
    constructor( private datepipe: DatePipe,  platform: Platform,translate: TranslateService) {
        super('en', platform);
        translate.get('dateFormat').subscribe(ts =>{ 
             this.format=dateFormat;
        });
    }
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            return this.datepipe.transform(date, this.format);
        } else {
            return date.toDateString();
        }
    }
}

添加工厂函数:

export function createDateAdapterLoader (dp: DatePipe,  platform: Platform,ts: TranslateService) {
  return new MyDateAdapter(dp,  platform, ts);
}

修改指令:

    import {TranslateService} from '@ngx-translate/core';
    import {DatePipe} from '@angular/common';
    import {Platform} from '@angular/cdk/platform';
    @Directive({
      selector: '[dateFormat]',
      providers: [
        {
          provide: NG_VALIDATORS,
          useExisting: DateFormatDirective,
          multi: true
        },
        {
          provide: DateAdapter,
          useFactory: createDateAdapterLoader,
          deps: [DatePipe, Platform ,TranslateService]
        },
        {
          provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
        }
      ]
    })
    export class DateFormatDirective {
      @Input('dateFormat') format: string;
    }

您需要在 AppModule 中提供 DatePipe。

这称为工厂提供者动态创建依赖值!! refer

要从 i18n 文件中获取格式值，您可以使用任何国际化 (i18n) 库，例如:@ngx-translate