Angular Material mat-datepicker(更改)事件和格式

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

从文档中, 您可以根据您的要求使用以下某个事件

@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中声明函数.

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

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 4

我在 Angular 7 中工作，实现如下。

在您的班级中声明一个事件：

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

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

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

您的 html 文件 matInput 将是：

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

Answer 5

这是我所做的，Angular 9：

html:

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

TS：

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

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

将日期值拉入 TS 文件的替代方法：

export class AppComponent {
  dateGC = new FormControl(new Date());
  //dateGC : any;

  onDateChange(): void {
    console.log("Inside onDateChange()");
    console.log("dateGC= "+ this.dateGC);
  }    
}