输入单击时为日期选择器创建指令

Question

  

我有一个包含很多组件的项目。在大多数组件中，我都使用date。在本节中，我使用了输入。如果要单击输入数据而不是日期图标，我想创建一个指令并编写一段代码。

---

## Html ##

<mat-form-field appearance="outline">
  <input dvOpenDataPiker formControlName="StartDateJalali" [readOnly]="true" matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-label dvRequiredField>start date</mat-label>
</mat-form-field>

---

    ## Directive ##

    import { Directive, HostListener, ElementRef, Input, OnChanges } from '@angular/core';


@Directive({
  selector: '[dvOpenDataPiker]'
})
export class OpenDataPikerDirective implements OnChanges {

  @Input() dvOpenDataPiker;

  constructor(private _elementRef: ElementRef) { }

  ngOnChanges() {
    console.log('_elementRef', this.dvOpenDataPiker);
  }

  @HostListener('onclick', ['$event'])
  onClick(event) {
    this.dvOpenDataPiker.nativeElement.click();
  }
}