ユーザーがカレンダーアイコンをクリックしたときだけでなく、入力フィールドをクリックしたときにも、日付ピッカーから日付を選択するカレンダーを開きたいのですが。 Material DatePicker 。そのため、このディレクティブを作成し、<md-datepicker>
にアタッチし、入力で(click)
イベントを監視します。
HTML:
<md-form-field class="field-half-width">
<input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki"
formControlName="dateUntil" (click)="clickInp()">
<md-datepicker-toggle id="calendar" mdSuffix [for]="picker2" ></md-datepicker-toggle>
<md-datepicker #picker2 manualClickRenderer></md-datepicker>
</md-form-field>
フォームコンポーネント:
import {ManualClickRerender} from '../shared/directives/manual-click.directive';
@Component({
selector: 'form',
providers: [ManualClickRerender]
})
export class FormComponent implements OnInit, OnChanges {
...
clickInp() {
this.manualClickRerender.botClick();
}
指令:
import { Directive, Renderer, ElementRef } from '@angular/core';
@Directive({
selector: '[manualClickRenderer]'
})
export class ManualClickRerender {
private nativeElement : Node;
constructor( private renderer : Renderer, private element : ElementRef ) {
this.nativeElement = element.nativeElement;
}
botClick() {
console.log(this.nativeElement); // logs the whole form, not the <md-datepicker>. I guess problem is here
this.renderer.invokeElementMethod(this.nativeElement, 'click', []);
}
}
これは私の最初のカスタムディレクティブなので、インポート/提供の方法など完全にはわかりません。メインモジュールにインポートして宣言に追加しましたが、フォームコンポーネントにインポートした後(クリックを渡す必要があるため、それを行いました)イベントへのイベント)ManualClickRerenderのプロバイダーがないというエラーが発生しました。したがって、それをフォームコンポーネントにプロバイダーとして追加しました。だから、はい、2回インポートしました。
また、ご覧のとおり、invokeElementMethod
メソッドがないため、Rerender2ではなくRerenderを使用しています...しかし、回避策はあると思います。
どんな情報でも事前にありがとう。
プロバイダーの必要はありません
<md-input-container>
<input mdInput [mdDatepicker]="start" (click)="start.open()" [(ngModel)]="_start" [ngModelOptions]="{standalone: true}" placeholder="choisir date" (keydown)="false">
<button mdSuffix [mdDatepickerToggle]="start"></button>
</md-input-container>
<md-datepicker #start></md-datepicker>
そのためのディレクティブは必要ありません。入力フィールドに(click)="picker2.open()"
を追加するだけです。
<md-form-field class="field-half-width">
<input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki"
formControlName="dateUntil" (click)="picker2.open()">
<md-datepicker-toggle id="calendar" mdSuffix [for]="picker2" ></md-datepicker-toggle>
<md-datepicker #picker2></md-datepicker>
</md-form-field>
これが working demo へのリンクです。
小さな問題が1つだけあります。[入力のエッジ]をクリックすると、プレースホルダーが表示されますが、カレンダーが表示されません。入力の真ん中をさらにクリックする必要があります。ただし、このソリューションはすてきでクリーンです
この質問への答えは、このように入力親の上のopen関数を呼び出すだけです
<mat-form-field (click)="picker.open()">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
CSSを使用して機能させることができます。
<mat-form-field>
<input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
<mat-datepicker-toggle[for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>
mat-datepicker-toggle.mat-datepicker-toggle {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
button {
width: 100%;
height: 100%;
}
}