web-dev-qa-db-fra.com

Matière angulaire mat-datepicker (changement) événement et format

J'utilise la directive datepicker en matériau angulaire et j'ai peu de problèmes. 

1. Lorsque j'ouvre la boîte de dialogue du sélecteur de date et que je sélectionne une date, la date s'affiche dans la zone de texte de saisie, mais je souhaite appeler une fonction chaque fois qu'un changement survient dans la zone de texte de saisie. 

À l'heure actuelle, si je saisis manuellement une valeur dans la zone de texte de saisie, je déclenche une fonction à l'aide de la directive (entrée) et elle fonctionne correctement, comme indiqué dans le code. Je souhaite activer la même fonction lorsque la date est modifiée à l'aide du dialogue du sélecteur de date.

2. Je souhaite également modifier le format de la date de mm/jj/aaaa en jj/mm/aaaa lorsque sélectionné dans la boîte de dialogue du sélecteur de date. Ici, mm/jj/aaaa est défini par défaut dans cette directive.

<input matInput [matDatepicker]="organizationValue" formControlName="organizationValue" (input)="orgValueChange(i)">
<mat-datepicker-toggle matSuffix [for]="organizationValue"></mat-datepicker-toggle>                 
<mat-datepicker #organizationValue></mat-datepicker>
angularangular-materialangular5
9
Umair Jameel

depuis docs vous pouvez utiliser l’un des événements ci-dessous en fonction de vos besoins

@Output()
dateChange(): EventEmitter<MatDatepickerInputEvent<D>>

Emet quand un événement de changement est déclenché à ce sujet.

@Output()
dateInput(): EventEmitter<MatDatepickerInputEvent<D>>

Emet lorsqu'un événement d'entrée est déclenché à ce sujet.

Par exemple:

<input matInput #ref [matDatepicker]="organizationValue" formControlName="organizationValue" (dateChange)="orgValueChange(ref.value)">

ou 

 <input matInput #ref [matDatepicker]="organizationValue" formControlName="organizationValue" (dateInput)="orgValueChange(ref.value)">
14
Vikas

  1. Dans votre html, vous pouvez utiliser (ngModelChange) = "functionName ()" pour déclencher n'importe quelle fonction avec le changement de date et la déclarer dans vos ts. 

  2. Pour changer le format de la date:

Ajoutez ceci à app.module.ts:

import{MatDateFormats, 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();
        }
    }
}

Ajoutez ce qui suit dans les fournisseurs de app.module.ts:

{provide: DateAdapter, useClass: AppDateAdapter},  
{provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}
6
Rak2018

Je travaille dans Angular 7 L'implémentation est la suivante.

Déclarez l'événement dans votre classe comme suit.

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

N'oubliez pas que le module de matériau doit déjà être installé . Créez une méthode dans le fichier TypeScript comme suit.

someMethodName (date: any) { 

// votre code ici

}

votre fichier html matinput sera comme ci-dessous

<input matInput [matDatepicker]="enddate" placeholder="" 
(dateChange)="someMethodName($event)" formControlName="EndDate">
2
Kindlebit Net