JQuery UI DatePicker - Input Blocked when Calendar Overlays card-header - jquery-ui

Question

I have implemented JQuery UI Datepicker on a site.
I have an issue where that when I click to show the calendar dropdown, where the dropdown overlays the bootstrap card in the next row, anything over the card-header cannot be clicked on.
If I scroll the page, the calendar position remains static, but the non-clickable area moves to wherever the card-header is positioned.
The z-index of the calendar is 9999, whilst that of the card-header is only 3.
I have tried adding
style="overflow: visible !important"
to the card based on another answer on stackoverflow, but no dice.
I have screenshot rendered html below, marking the datepicker, and the overlaid card-header:
In case relevant, I am using:
Bootstrap 4.6
ASP.NET Webforms
Material Dashboard 2.1.0
JQuery UI 1.13.2
JQuery 3.6.0
Any ideas why this is happening, and how to resolve? Thanks.
Edit 1 - 2023-01-11
I have put up a minimal example Here
I have added an inline style to the card-header that is being overlaid to increase the height, so that the problem is more apparent.
(I have stripped out a load of script references for this example that are now causing a few console errors, but these are not related to the issue.)

Answer 1

I am unable to replicate your code as it has links to content that is local to your web site. Consider the following more basic example.
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header">
<h4>Card with Datepicker</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-borderless mb-0">
<tbody>
<tr>
<th class="pl-0 w-50 pt-1 pb-1 border-top-0" scope="row"><strong>Select Date</strong></th>
<td class="pt-1 pb-1">
<span class="bmd-form-group is-filled"><input name="LastContactedCal" type="text" id="LastContactedCal" class="datepicker form-control" value="05/10/2022"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header" style="height: 200px;">
<h4>Another Card</h4>
</div>
<div class="card-body">
<p>Some Stuff</p>
</div>
</div>
</div>
</div>
This works as expected without the issue that you reported. I suspect that some other component that my example is not using is interfering with the click event in your sites code. I would suggest you remove all additional libraries except for Bootstrap and jQuery UI, then add them back in one at a time or in other orders, to see when the functionality you are seeing returns.