Angular MaterialのmatDatepickerはAngularの公式ページではinputとセットで使われている例しか紹介されていなかったのでInputを非表示にして使用する方法を共有します。
といってもinputのstyleを下記の通り設定するだけです。
width: 0; height: 0; padding: 0; margin: 0; border: none; visibility: hidden;
こんな感じで設定したらできると思います。
<input [matDatepicker]="picker" style="width: 0; height: 0; padding: 0; margin: 0; border: none; visibility: hidden;"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker>
ちなみにdisplay:none
で設定するとカレンダーが画面の左上に表示されるようになってしまい使えませんでした。
参考ページ
stackoverflow.com