Search code examples
angularangular-material2

use mat-datepicker directly without input


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.


Solution

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