web-dev-qa-db-fra.com

Angular Material, Md-datepicker - ouvre le sélecteur de date au clic d'entrée

Je veux ouvrir le calendrier où l'utilisateur choisit la date dans le sélecteur de date non seulement lorsque l'utilisateur clique sur l'icône du calendrier, mais aussi lorsque il clique sur le champ de saisie. Material DatePicker . Je crée donc une directive pour cela, en l'attachant à <md-datepicker> et aussi regarder (click) événement en entrée:

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>

composant de forme:

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

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

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

Directif:

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

Il s'agit de ma première directive personnalisée, donc je ne sais pas complètement comment l'importer/la fournir, etc. événement à elle) a obtenu l'erreur qu'il n'y a aucun fournisseur à ManualClickRerender. Donc, je l'ai ajouté en tant que fournisseur dans le composant de formulaire. Donc, oui, je l'ai importé deux fois ..

Aussi, comme vous le voyez, j'utilise Rerender, pas Rerender2, car il n'a pas de méthode invokeElementMethod ... Mais je parie qu'il existe une solution de contournement, mais je ne le sais pas ..

Merci d'avance pour toute information.

javascriptangulartypescriptangular-materialangular-material2
8
Julius Dzidzevičius

Il n'y a pas besoin de prestataires

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

Vous n'avez pas besoin d'une directive pour cela. Il suffit d'ajouter (click)="picker2.open()" dans le champ de saisie:

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

Voici un lien vers démo de travail .

6
Faisal

Juste un petit problème - si je clique sur Bord de l'entrée, l'espace réservé monte, mais le calendrier n'apparaît pas. Je dois cliquer plus au milieu sur l'entrée. Cependant, cette solution est agréable et propre

La réponse à cette question est d'appeler simplement la fonction ouverte au-dessus de votre parent d'entrée comme ceci

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

Vous pouvez utiliser CSS pour le faire fonctionner.

<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%;
}

}

1
Amit Rajbhandari