Angular Material，Md-datepicker-输入单击时打开日期选择器

Question

我想打开日历，不仅用户单击日历图标，而且单击输入字段时，用户都可以从日期选择器中选择日期。物料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', []);
  }
}

这是我有史以来的第一个自定义指令，因此无法完全确定如何导入/提供它，等等。我将其导入到主模块中并添加到声明中，但是在将其导入到表单组件中之后（我这样做是因为需要传递click事件发生）错误，指出没有ManualClickRerender提供程序。因此，将其也作为提供程序添加到了表单组件中。所以，是的，我两次导入了它。

就像您看到的那样，我使用Rerender而不是Rerender2，因为它没有invokeElementMethod方法...但是我敢打赌，这里有一种解决方法，只是不知道。

在此先感谢您的任何信息。

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

这对我有用

<mat-form-field (click)="picker.open()">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></matdatepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 3

您不需要为此的指令。只需(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> 

这是工作演示的链接。

Answer 4

只是一个小问题 - 如果我点击输入的边缘，占位符会上升，但日历不会显示。我需要在输入的中间点击更多。然而，这个解决方案很好而且很干净

这个问题的答案就是像这样在输入父级上方调用 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>