Material angular mat-datepicker (cambio) evento y formato

Nuestro grupo de trabajo ha estado horas investigando para darle resolución a tu interrogante, te compartimos la soluciones por eso deseamos servirte de mucha apoyo.

Solución:

de los documentos, puede usar uno de los siguientes eventos según sus requisitos

@Output()
dateChange(): EventEmitter>

Se emite cuando se activa un evento de cambio en este archivo .

@Output()
dateInput(): EventEmitter>

Se emite cuando se activa un evento de entrada en este archivo .

Por ejemplo:

o

1. En su html puede usar (ngModelChange)=”functionName()” para activar cualquier función con el cambio de fecha y declarar la función en su ts.

2. Para cambiar el formato de la fecha:

Añadir esto a app.module.ts:

importMatDateFormats, MAT_DATE_FORMATS, NativeDateAdapter, DateAdapter from '@angular/material';

const MY_DATE_FORMATS = 
    parse: 
        dateInput:  day: 'numeric', month: 'numeric', year: 'numeric' 
    ,
    display: 
        dateInput: 'input',
        monthYearLabel:  year: 'numeric', month: 'short' ,
        dateA11yLabel:  year: 'numeric', month: 'long', day: 'numeric' ,
        monthYearA11yLabel:  year: 'numeric', month: 'long' ,
    
 ;

export class AppDateAdapter extends NativeDateAdapter 

    format(date: Date, displayFormat: Object): string 
        if (displayFormat === 'input') 
            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();
            return `$day/$month/$year`;
         else 
            return date.toDateString();
        
    

Agregue lo siguiente en proveedores de app.module.ts:

provide: DateAdapter, useClass: AppDateAdapter,  
provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS

Estoy trabajando en Angular 7 y la implementación es la siguiente.

Declara un evento en tu clase:

@Output() 
dateChange:EventEmitter< MatDatepickerInputEvent< any>>;

Recuerda que debes tener el módulo de materiales ya instalado. Cree un método en el archivo mecanografiado de la siguiente manera.

someMethodName(date: any)   
    // your code here

Su archivo html matInput será:

Comentarios y calificaciones

Si crees que ha sido de utilidad nuestro artículo, te agradeceríamos que lo compartas con más entusiastas de la programación de esta forma nos ayudas a extender esta información.

---

---

Utiliza Nuestro Buscador