Angular Material mat-datepicker（更改）事件和格式

Question

我正在使用 angular material datepicker 指令，但我遇到的问题很少。

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

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

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>

Answer 1

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

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

在此触发更改事件时发出。

@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)">

Answer 2

1. 在您的 html 中，您可以使用 (ngModelChange)="functionName()" 来触发任何更改日期的函数，并在您的 ts.xml 中声明该函数。

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}

Answer 3

这就是我所做的，Angular 9：

html:

  <input
    matInput
    [matDatepicker]="picker"
    (dateChange)="onDateChange()"
  />

ts：

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

onDateChange(): void {
    this.dateChange.emit();
}

Answer 4

HTML：

<div class="someClass">
   <mat-form-field appearance="outline">
      <mat-label>Label</mat-label>
      <input (dateChange)="onDateChange($event)" formControlName="formControlName" matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
</div>

TS：

  public onDateChange(event: MatDatepickerInputEvent<Date>): void {
    console.log('Teste', event.value);
  }

Answer 5

MatDatePicker 似乎存在缺陷，因此如果您先清除日期（如果有值），转到另一个字段，然后使用手动输入编辑该字段（不使用日期选择器），然后离开该字段，月份和日期被切换。为了纠正这种行为，除了 AppDateAdapter 类中的“格式”方法之外，您还必须定义“解析”方法（参见 Rak2018 的答案）：

parse(value: any): Date | null {
    const vals = value.split('.'); // or '-' if you use - as separator
    if (vals.length !== 3 || parseInt(vals[2] < 1900) return null;
    return new Date(parseInt(vals[2]), parseInt(vals[1]) - 1, parseInt(vals[0]));
}

我所说的不足是指通常情况下，您可以在提供程序中定义类似

{ provide: MAT_DATE_LOCALE, useValue: 'de' }

除了上述情况外，它都有效。所以问题是默认的“解析”方法不遵守这个 MAT_DATE_LOCALE 设置。

另见How to implement MD_DATE_FORMATS for datepicker?