use mat-datepicker directly without input
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);
});
}
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