¿Cómo cambiar el formato de fecha Mat-Datepicker a DD / MM / YYYY de la manera más sencilla?

Solución:

La forma más sencilla es cambiar la configuración regional:

Agregue lo siguiente a la sección de proveedores de su módulo:

{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }

Primero, vincule el formato a su mat-datepicker.

export const MY_FORMATS = {
    parse: {
        dateInput: 'LL'
    },
    display: {
        dateInput: 'YYYY-MM-DD',
        monthYearLabel: 'YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'YYYY'
    }
};

junto con esto, debe importar y proporcionar los módulos.

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

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

Y en HTML siga esto simplemente.

<mat-form-field>
    <input
        matInput
        [matDatepicker]="dp"
        placeholder="Verbose datepicker
        [formControl]="date"
    >
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

Pruebe esto en el componente que está utilizando mat-datepicker

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

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

---

---

Utiliza Nuestro Buscador