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

Angular Material, Md-datepicker - open date-picker on input click

提问by Julius Dzidzevi?ius

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:

我想打开日历，用户不仅在用户单击日历图标时，而且在单击输入字段时从日期选择器中选择日期。材料日期选择器。因此，我为此创建了指令，将其附加到<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> 

form-component:

表单组件：

import {ManualClickRerender} from '../shared/directives/manual-click.directive';

@Component({
  selector: 'form',
  providers: [ManualClickRerender]
})

export class FormComponent implements OnInit, OnChanges {
 ...
  clickInp() {
    this.manualClickRerender.botClick();
  }

Directive:

指示：

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', []);
  }
}

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

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

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

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

Thanks in advance for any info.

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

回答by Melchia

There is no need for providers

不需要提供者

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

回答by Faisal

You dont need a directive for that. Just add (click)="picker2.open()"in the input field:

你不需要一个指令。只需(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> 

Here is a link to working demo.

这是工作演示的链接。

回答by Amit Rajbhandari

You can use CSS to make it work.

您可以使用 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%;
}

}

}

回答by Awais

Just one little problem - if I click on edge of the input, placeholder goes up, but calendar doesn't show up. I need to click more in the middle on the input. However, this solution is nice and clean

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

Answer to this question is just call open function above your input parent like this

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