Angular Material，Md-datepicker - 在输入点击时打开日期选择器 [英] Angular Material, Md-datepicker - open date-picker on input click

问题描述

我想打开日历，用户不仅在用户单击日历图标时，而且在单击输入字段时从日期选择器中选择日期.Material DatePicker.所以我为此创建了指令，将它附加到 <md-datepicker> 并观察输入时的 (click) 事件:

I want to open calendar where user chooses date from date-picker not only when user clicks on calendar icon, but also when clicks on input field. Material DatePicker. So I create directive for this, attaching it to <md-datepicker> and also watching for (click) event on input:

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

This is my first custom directive ever, so not completaly sure how to import / provide it, etc. I imported it in main module and added to declarations, but after I imported it in my form component (I did that because need to pass click event to it) got error that there are no providers to ManualClickRerender. So added it as provider as well in form-component. So, yes, I imported it twice..

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

Also as you see, I use Rerender, not Rerender2, because it doesn't have invokeElementMethod method... But I bet there is a workaround, just dont know it..

提前感谢您提供任何信息.

Thanks in advance for any info.

推荐答案

不需要提供者

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

这篇关于Angular Material，Md-datepicker - 在输入点击时打开日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！