web-dev-qa-db-fra.com

angular matériel 2 sélecteur de date ouverture automatique sur focus

Comment angular matériel 2 peut être configuré pour s'ouvrir automatiquement sur le focus? Je n'ai rien trouvé dans la documentation sur https://material.angular.io/components/datepicker/overview .

Le html actuel est comme ceci:

 <input [mdDatepicker]="myDatepicker" id="inputWeekEnding" name="inputWeekEnding" type="text" class="form-control" show-button-bar="false"
      [(ngModel)]="weekEnding" [mdDatepickerFilter]="weekEndingPickerFilter" (ngModelChange)="weekEndingChanged()"
              required>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" [mdDatepickerToggle]="myDatepicker">
    <i class="glyphicon glyphicon-calendar"></i>              
  </button>
</span>
<md-datepicker #myDatepicker md-open-on-focus ></md-datepicker>
angularangular-material2
24
mehran

mdDatepicker fournit la méthode open() afin de l'ouvrir manuellement aux développeurs de biche. Vous pouvez l'invoquer lors de l'événement focus de md-input. Voir docs (Method of MatDatepicker).

<md-input-container>
  <input mdInput [mdDatepicker]="picker" (focus)="picker.open()" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Démo ( démo incluse pour l'ouverture sur le focus et l'ouverture en TypeScript)

39
Pengyy

Selon @ angular/material2 v7.0.1, j'ai pu gérer correctement le focus d'entrée en ...

  • ajouter (focus)="picker.open()" on matInput élément d'entrée pour déclencher l'ouverture du sélecteur de date sur le focus
  • ajouter (closed)="input.blur()" sur mat-datepicker élément afin qu'il puisse supprimer le focus sur l'entrée une fois le sélecteur de date fermé
<mat-form-field>
  <input matInput #input [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (closed)="input.blur()"></mat-datepicker>
</mat-form-field>
15
j3ff

Pour le nouveau Angular & Material (5 et supérieur), il devrait ressembler à ceci. Le lien en question pointe vers une documentation à jour, mais utilise le code de Angular 2, ce qui pourrait être déroutant pour les débutants.

<mat-form-field>
      <input matInput [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
3
David Votrubec