angular - mat-datepicker 上的多种 dateInput 格式

Question

我正在创建两个 mat-datepicker，一个格式为“MM/YYYY”，另一个格式为“DD/MM/YYYY”，但我无法在模块中配置这两种格式。

我尝试将 MM/YYYY 的设置放入一个模块，并将 DD/MM/YYYY 的设置放入应用模块。

代码 1：

export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
...

providers: [{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}]
}; 

代码 2：

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'DD MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'DD MMMM YYYY',
  },
};
...
providers: [{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}]
})

如果我在设置中使用 DD/MM/YYYY 格式，所有日期显示为 DD/MM/YYYY，如果我不使用，所有日期显示为 MM/YYYY。我应该怎么做才能将一个日期显示为 MM/YYYY 而另一个日期显示为 DD/MM/YYYY？

Answer 1

你读过这个吗？ https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

可以在此处找到此示例的工作stackblitz 。

Answer 2

我找到了一种方法来解决这个问题，就像 Angular Material Wiki 中的 Datepicker 示例一样，而不是在模块中定义 DateAdapter 和 Date Formats 提供程序，而是在组件中定义它，然后它就起作用了。

Answer 3

<mat-form-field><input
    type="text"
    [value]="VisitorsCurrentDate"
    class="visit_date"
    (click)="patientVisitPicker.open()"
    style="text-transform: capitalize"
    style="border: none" /><input
    matInput
    [matDatepicker]="patientVisitPicker"
    (dateInput)="setPatientsVisitsDateTiming($event.value)"
    style="display: none"
    class="mat_class" /><mat-datepicker-toggle
    matSuffix
    [for]="patientVisitPicker"
    style="display: none"
  ></mat-datepicker-toggle
  ><mat-datepicker
    [dateClass]="dateClass"
    #patientVisitPicker
    style="display: none"
  ></mat-datepicker
></mat-form-field>

public setPatientsVisitsDateTiming(date:any){
    this.VisitorsCurrentDate = moment(date, "D-M-YYYY").format("DD MMM YYYY");
}