use mat-datepicker directly without input

Question

I want to put the datepicker in a permanent sidebar always visible and not dependent on an input, is this possible? I imagined that just putting the component and adding opened = true could leave the datepicker inside a box always visible.

Answer 1

turns out this is pretty straightforward import the MatDatePickerModule as per usual and then simply use the mat-calendar selector

<mat-calendar></mat-calendar> 

In order to hook into the selection via typescript

  @ViewChild(MatCalendar) _datePicker: MatCalendar<Date>  ngOnInit() {     this._datePicker.selectedChange.subscribe(x => {       console.log(x);     });   } 

Answer 2

You can also try to hide with 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> 

The advantage of hiding with css is that the datepicker is positioned relative to the hidden form-field