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示例，而不是在Module中定义DateAdapter和Date Formats提供程序，而是在Component中定义了它，然后它起作用了。

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

mat-datepicker上的多种dateInput格式

3 个答案: