御成門プログラマーの技術日記

Microsoft AzureやAngularなどの技術情報を発信します

【Angular Material】matDatepickerでinputを非表示にする方法

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