wake-up-neo.com

Angular Material mat-datepicker (ändern) Ereignis und Format

Ich verwende eckige Material-Datepicker-Direktive und habe einige Probleme. 

1. Wenn ich das Datumsauswahldialogfeld öffne und ein Datum auswähle, wird das Datum im Eingabetextfeld angezeigt. Ich möchte jedoch eine Funktion aufrufen, wenn sich im Eingabetextfeld Änderungen ergeben. 

Wenn ich jetzt manuell einen Wert in das Eingabetextfeld eingebe, löse ich die Funktion mithilfe der (Eingabe) -Anweisung aus, und es funktioniert einwandfrei, wie im Code gezeigt. Ich möchte dieselbe Funktion auslösen, wenn das Datum mit dem Datumsauswahldialog geändert wird.

2. Ich möchte auch das Format des Datums von mm/tt/jjjj in tt/mm/jjjj ändern, wenn es aus dem Datumsauswahldialog ausgewählt wird. In dieser Direktive wird hier standardmäßig mm/tt/jjjj festgelegt.

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

aus docs Sie können je nach Anforderung eines der unten aufgeführten Ereignisse verwenden

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

Gibt aus, wenn darauf ein Änderungsereignis ausgelöst wird.

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

Gibt aus, wenn ein Eingabeereignis dafür ausgelöst wird.

Zum Beispiel:

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

oder 

 <input matInput #ref [matDatepicker]="organizationValue" formControlName="organizationValue" (dateInput)="orgValueChange(ref.value)">
14
Vikas
  1. In Ihrer HTML-Datei können Sie (ngModelChange) = "functionName ()" verwenden, um eine beliebige Funktion mit der Datumsänderung auszulösen und die Funktion in Ihrem TS zu deklarieren. 

  2. So ändern Sie das Format des Datums:

Fügen Sie dies zu app.module.ts hinzu:

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();
        }
    }
}

Fügen Sie Folgendes in Anbietern von app.module.ts hinzu:

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

Ich arbeite in Angular 7 Die Implementierung ist wie folgt.

Deklarieren Sie das Ereignis in Ihrer Klasse wie folgt.

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

Denken Sie daran, dass das Materialmodul bereits installiert sein sollte. Erstellen Sie eine Methode in der TypeScript-Datei wie folgt.

someMethodName (Datum: beliebig) { 

// Ihr Code hier

}

ihre HTML-Datei wird wie folgt aussehen

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