use mat-datepicker directly without input

Luis Ruiz Figueroa picture Luis Ruiz Figueroa · Feb 2, 2018 · Viewed 15.3k times · Source

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

Brett Smith picture Brett Smith · Mar 20, 2018

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