tengo un error con un datepicker de angular material el cual no consigo solucionar. La cuestión es que necesito crear un datepicker que muestre la fecha con el formato DD/MM/YYYY. Desarrollé un DateAdapter customizado para que al seleccionar desde el modal, la fecha salga correcta, pero el problema viene cuando el usuario escribe la fecha a mano.
Cuando escribo la fecha, al perder el focus el datepicker, este me cambia el mes por el día. Ejemplo práctico:
Si yo escribo: 10/06/2020, cuando cambio de input en el formulario, el datepicker me cambia automaticamente la fecha a 06/10/2020. Depuré y no es que me estuviese cambiando la posición del mes y el día, si no que cuando meto la fecha a mano (10/06/2020), este lo interpreta como el 6 de Octubre de 2020.
Aquí está el código que tengo:
HTML
<mat-form-field appearance="outline" class="customDatePicker">
<input
aria-label="fechaMinDisposicion"
placeholder="00/00/0000"
matInput
(keyup)="autoFormatDate($event)"
[min]="minDate"
formControlName="fechaMinDisposicion"
[matDatepicker]="picker2"
id="picker"/>
<div matSuffix>
<mat-icon
class="icon"
(click)="picker2.open()"
onKeyDown="picker2.open()">
</mat-icon>
</div>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
Component.ts
@Component({
selector: 'screen',
templateUrl: 'screen.component.html',
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' },
{ provide: DateAdapter, useClass: CustomDateDirective },
{ provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS },
],
})
CustomDateDirective
export class CustomDateDirective extends NativeDateAdapter{
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
let day: string = date.getDate().toString();
day = +day < 10 ? '0' + day : day;
let month: string = (date.getMonth() + 1).toString();
month = +month < 10 ? '0' + month : month;
let year = date.getFullYear();
return `${day}/${month}/${year}`;
}
return date.toDateString();
}
}
export const APP_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
},
display: {
dateInput: 'input',
monthYearLabel: { year: 'numeric', month: 'numeric' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
},
monthYearA11yLabel: { year: 'numeric', month: 'long' },
}
};