web-dev-qa-db-ja.com

Angular Material mat-datepicker（変更）イベントおよび形式

angularマテリアルdatepickerディレクティブを使用していますが、問題はほとんどありません。

1。日付選択ダイアログを開いて任意の日付を選択すると、入力テキストボックスに日付が表示されますが、入力テキストボックスに変更が発生した場合は関数を呼び出したいと思います。

現在、入力テキストボックスに手動で値を入力すると、（入力）ディレクティブを使用して関数をトリガーしており、コードに示すように正常に機能しています。日付選択ダイアログを使用して日付が変更されたときに同じ機能をトリガーしたい。

2。日付の選択ダイアログで選択した場合、日付の形式をmm/dd/yyyyからdd/mm/yyyyに変更したい。このディレクティブでは、デフォルトでmm/dd/yyyyが設定されています。

<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
11
Umair Jameel

from docs 要件に基づいて以下のイベントのいずれかを使用できます

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

これでchangeイベントが発生すると発生します。

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

これで入力イベントが発生すると発生します。

例えば：

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

または

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

  1. Htmlでは、（ngModelChange）= "functionName（）"を使用して、日付の変更で関数をトリガーし、tsで関数を宣言できます。

  2. 日付の形式を変更するには：

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

app.module.tsのプロバイダーに以下を追加します。

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

私はAngular 7で作業しており、実装は次のとおりです。

クラスでイベントを宣言します。

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

マテリアルモジュールが既にインストールされている必要があります。次のように、TypeScriptファイルに1つのメソッドを作成します。

someMethodName(date: any) {  
    // your code here
}

HTMLファイルmatInputは次のようになります。

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