I am trying to use a jquery UI datepicker in an angular material table cell:
<ng-container cdkColumnDef="dt">
<md-header-cell *cdkHeaderCellDef> Date </md-header-cell>
<md-cell *cdkCellDef="let row" contenteditable='false' >
<div class="timeline-cal">
<md-form-field class="input-full-width">
<input mdInput class="date-field cursor-pointer" type="text" readonly>
</md-form-field>
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</md-cell>
</ng-container>
In ts file:
ngOnInit()
{
/*-----------------JQuery UI Calender control settings---------------------------*/
console.log('jquery::::::', $);
setTimeout(()=>{
$('.date-field').datepicker();
}, 200);
}
The issue is that the datepicker won't open. However when I include the datepicker outside the table, it opens perfectly fine.
[I suspect the main problem is that the jquery popup won't open inside an angular material component. I had faced the same issue while trying to open angular material datepicker inside a bootstrap modal form: angular material datepicker doesn't open in modal dialog ]
