入力のクリックで角度の材料、Mdのdatepicker - 開いている日付ピッカー

Question

私は、ユーザーがカレンダーアイコンをクリックするだけでなく、入力フィールドをクリックしたときに日付ピッカーから日付を選択するカレンダーを開きたい。 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に追加します。それでは、プロバイダとしてform-componentにも追加されました。だから、私はそれを2回インポートしました。

また、私はinvokeElementMethodメソッドを持っていないので、Rerender2ではなくRerenderを使用しています...しかし、回避策があると思います。

事前情報ありがとうございます。

Answer 1

あなたはそのためのディレクティブを必要といけないプロバイダ

<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> 

Answer 2

の必要はありません。ただ、入力フィールドに(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へのリンクです。