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.
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);
});
}
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>
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é