Multiple dateInput formats on mat-datepicker

问题

I'm creating two mat-datepickers, one with the format "MM/YYYY" and another with the format "DD/MM/YYYY",but i can't configure both formats in the module.

I tried to put in one module the settings for MM/YYYY and in the app module the settings for DD/MM/YYYY.

Code 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}]
};

Code 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}]
})

If i use the DD/MM/YYYY format in the settings,all dates show as DD/MM/YYYY,if i don't use,all dates show as MM/YYYY. What should i do to show one date as MM/YYYY and another as DD/MM/YYYY?

回答1:

Have you read this yet? https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

Working stackblitz for this example can be found HERE.

回答2:

I found a way to solve this doing exactly like the examples of Datepicker in Angular Material Wiki,instead of defining the DateAdapter and Date Formats providers in the Module, i defined it in the Component,then it worked.

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

来源：https://stackoverflow.com/questions/56176609/multiple-dateinput-formats-on-mat-datepicker

标签

angular

typescript

datepicker

angular-material2

formatdatetime