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

Question

我想打开日历，用户不仅可以在用户单击日历图标时，还可以在单击输入字段时从日期选择器中选择日期。 材料日期选择器。因此，我为此创建了指令，将其附加到 <md-datepicker> 并观察 (click) 输入事件：

网址：

   <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 的提供者。所以在表单组件中也将它添加为提供者。所以，是的，我导入了两次..

同样如您所见，我使用 Rerender，而不是 Rerender2，因为它没有 invokeElementMethod 方法…但我打赌有一个解决方法，只是不知道它..

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

原文由 Julius Dzidzevičius 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Melchia 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

这是 工作演示 的链接。

原文由 Faisal 发布，翻译遵循 CC BY-SA 3.0 许可协议