Question

我创建了一个自定义指令，用于向现有的matDatePicker控件添加功能。该指令有一个名为format的Input属性，它在运行时给出日期格式。我提供了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

在查看材料的datepicker和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。

这称为Factory provider，动态创建依赖值！ refer

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

角度材料datepicker自定义格式

1 个答案: