我有一个包含很多组件的项目。在大多数组件中,我都使用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();
}
}