Angular Material mat-datepicker(更改)事件和格式 [英] Angular Material mat-datepicker (change) event and format

问题描述

我正在使用角度材料 datepicker 指令，但几乎没有问题.

I am using angular material datepicker directive and I have few problems.

1. 当我打开日期选择器对话框并选择任何日期时，日期显示在输入文本框中，但我想在输入文本框中发生任何更改时调用一个函数.

1. When I open date picker dialog and select any date, date shows up in input text box, but I want to call a function when ever any change occur in input text box.

现在，如果我在输入文本框中手动输入任何值，我正在使用 (input) 指令触发函数，并且它工作正常，如代码所示.我想在使用日期选择器对话框更改日期时触发相同的功能.

Right now if I manually enter any value in input text box, I am triggering function using (input) directive and it is working fine as shown in code. I want to trigger same function when date gets change using date picker dialog.

2. 我还想将日期格式从 mm/dd/yyyy 更改为 dd/mm/yyyy日期选择器对话框.这里的 mm/dd/yyyy 在该指令中默认设置.

2. I also want to change the format of date from mm/dd/yyyy to dd/mm/yyyy when selected from date picker dialog. Here mm/dd/yyyy is set by default in this directive.

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

推荐答案

来自 docs您可以根据需要使用以下事件之一

from docs you can use one of the below events based on your requirement

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

在 this 上触发更改事件时发出.

Emits when a change event is fired on this .

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

当一个输入事件被触发时发出.

Emits when an input event is fired on this .

例如:

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

或

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

这篇关于Angular Material mat-datepicker(更改)事件和格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！