Question

我正在使用角度材料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>

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

在您的html中，您可以使用（ngModelChange）=＆＃34; functionName（）＆＃34;通过更改日期触发任何功能并在ts中声明功能。
更改日期格式：

将此添加到datetime value 1/1/2018 00:00:00 14 1/1/2018 00:30:00 12 ...：

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

Answer 3

我在Angular 7中的工作如下。

在类中声明事件，如下所示。

@Output（） dateChange：EventEmitter >;

请记住，您应该已经安装了物料模块。在打字稿文件中创建一种方法，如下所示。

someMethodName（date：any）{

//您的代码在这里

}

您的html文件matinput如下所示

Find

Answer 4

这就是我所做的，Angular 9：

html：

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

ts：

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

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

Answer 5

MatDatePicker似乎有缺陷，因此，如果您首先清除日期（如果有值），请转到另一个字段，然后使用手动输入（不使用日期选择器）编辑该字段，然后离开该字段，将切换月份和日期。为了更正此行为，除了AppDateAdapter类中的“ format”方法外，还必须定义“ parse”方法（请参见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' }

，并且在上述情况下有效。因此，问题在于默认的“ parse”方法不遵循此MAT_DATE_LOCALE设置。

另请参阅How to implement MD_DATE_FORMATS for datepicker?

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

5 个答案: