web-dev-qa-db-fra.com

utilisez mat-datepicker directement sans entrée

Je veux mettre le sélecteur de date dans une barre latérale permanente toujours visible et ne dépendant pas d'une entrée, est-ce possible??. J'ai imaginé que le fait de placer le composant et d'ajouter open = true pouvait laisser le sélecteur de date à l'intérieur d'une boîte toujours visible.

angularangular-material2
8
Luis Ruiz Figueroa

s’avère que c’est assez simple, importez MatDatePickerModule comme d’habitude et utilisez simplement le sélecteur de calendrier

<mat-calendar></mat-calendar>

Afin de raccrocher à la sélection via TypeScript 

  @ViewChild(MatCalendar) _datePicker: MatCalendar<Date>

ngOnInit() {
    this._datePicker.selectedChange.subscribe(x => {
      console.log(x);
    });
  }
16
Brett Smith

Il est possible d'avoir un sélecteur de date "sans" une entrée. Cependant, le sélecteur de date requiert toujours une entrée pour fonctionner. Une solution de contournement est donc une entrée masquée:

<input [matDatepicker]="picker" type="hidden">
<mat-datepicker #picker></mat-datepicker>
<mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>

Démo

3
Edric

Vous pouvez également essayer de cacher avec css ex:

<mat-form-field style="width:1px;visibility:hidden;">
  <input matInput [matDatepicker]="picker" >
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-button (click)="picker.open()" ></button>

L'avantage de se cacher avec css est que le sélecteur de date est positionné par rapport au champ de formulaire masqué

1
Stefan