web-dev-qa-db-fra.com

Comment changer le format de date mat-sdmentpicker à dd / mm / aaaa de la manière la plus simple?

Je configure un mat-date-datdapicker pour DOB et traditionnellement, le format d'affichage est MM/DD/AAAA, j'ai besoin de le changer en DD/mm/aaaa avec moins de codage

J'ai essayé le format étiquette dans le sélecteur mat, mais cela ne fonctionne pas, d'autres ramasseurs de date tels que NGBDatePicker Format peuvent facilement changer via une ligne de codage

  <div class="col-md-3 Dinline-block">
     <mat-form-field>
        <input matInput [matDatepicker]="picker2" [max]="currentDate" 
         placeholder="DOB(DD/MM/YYYY)" required formControlName="dob" 
          readonly />
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker- 
         toggle>
        <mat-datepicker #picker2></mat-datepicker>
     </mat-form-field>
  </div>

La date affichée après la sélection du sélecteur de matelas doit être DD-MM-AAAAAYY et la récupération de la valeur du sélecteur de date, il doit également être au format DD-MM-AAAA

angularangular-material
15
Zeeshan Chaudhary

Essayez ceci dans le composant que vous utilisez mat-datepicker

import { DateAdapter } from '@angular/material';

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('your locale'); 
}
6
Leandro Q

utilisez Daadapter du noyau

import { DateAdapter } from '@angular/material/core';

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('en-GB'); //dd/MM/yyyy

}

`

5
Raja Sekaran

Je l'ai travaillé après avoir combiné certaines connaissances de diverses réponses ici, alors j'ai pensé consolider ce qui a fonctionné pour moi.

Angulaire 10:

Dans votre module, importer ma_date_locale et l'ajouter aux fournisseurs:

import { MAT_DATE_LOCALE } from '@angular/material/core'

@NgModule({
  declarations: [...],
  imports: [...],
  exports: [...],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ]
})

Si vous utilisez un module partagé pour importer du matériel, cela modifiera tous les formats de vos pickers de votre point de vue sur le site.

2
Zingers

Pour moi, la meilleure approche était d'injecter MAT_DATE_FORMATS à mon composant, qui détermine ensuite de manière dynamique ce que le format d'affichage devrait ressembler.

Configuration dans le composant:

  constructor(@Inject(MAT_DATE_FORMATS) private dateFormats) { }

  ngOnInit() {
    if (this.data.inputType === InputDateDialogRangeType.MonthAndYearOnly)
      this.dateFormats.display.dateInput = "MMMM YYYY";
    else if (this.data.inputType === InputDateDialogRangeType.YearOnly)
      this.dateFormats.display.dateInput = "YYYY";           
  }

Configuration dans le module:

 providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

export const MY_DATE_FORMAT = {
  display: {
    dateInput: 'DD MMM YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
1
Robert J.