how to use datepicker without Input and only with the calander icon

Question

I'm working on a Datatable filter and I want to use a calendar icon to set up the filter of date by clicking on Datatable Header.

By that point, I have displayed a calendar Icon on my Datatable header and I want to know how to use it as a date picker?

My HTML:

<ng-container matColumnDef="Date">
  <mat-header-cell *matHeaderCellDef fxHide mat-sor t-header fxShow.gt-md>
    Date de l'opération
    <mat-icon>
      calendar_today
    </mat-icon>
  </mat-header-cell>

  <mat-cell *matCellDef="let element" fxHide fxShow.gt-md>
    <p class="category text-truncate">
      {{element.CreatedDateGmt}}
    </p>
  </mat-cell>
</ng-container>

Answer 1

you can use a mat-menu, and inside a mat-calendar, from this SO, removing the "div" of stopPropagation...

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
     <mat-calendar #calendar 
        (selectedChange)="select($event,calendar)" 
        [dateClass]="isSelected">
     </mat-calendar>
</mat-menu>