我想打开日历,用户从日期选择器中选择日期,不仅在用户点击日历图标时,而且在点击输入字段时也是如此。 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', []);
}
}
这是我的第一个自定义指令,所以不能完全确定如何导入/提供它等。我在主模块中导入它并添加到声明中,但是在我将其导入到我的表单组件中之后(我这样做是因为需要将click事件传递给它)得到了没有提供者到ManualClickRerender的错误。所以在表单组件中添加它作为提供者。所以,是的,我导入了两次..
同样如你所见,我使用Rerender,而不是Rerender2,因为它没有invokeElementMethod
方法...但我打赌有一种解决方法,只是不知道它..
提前感谢任何信息。
答案 0 :(得分:7)
不需要提供者
<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>
答案 1 :(得分: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>
以下是指向working demo的链接。
答案 2 :(得分: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>
答案 3 :(得分:1)
您可以使用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%;
}
}
答案 4 :(得分:0)
一个小问题-如果我单击输入的边缘,占位符 上升,但日历不显示。我需要点击更多 输入中间。但是,这种解决方案既好又干净
这个问题的答案是在输入父级上方调用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>