mat-datepicker 上的多种 dateInput 格式

Question

我正在创建两个 mat-datepickers，一个格式为 "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");
}

mat-datepicker 上的多种 dateInput 格式

Multiple dateInput formats on mat-datepicker

datepicker

formatdatetime

typescript

angular-material2

angular