I've built a Bootstrap 4 website with various survey questions grouped in Bootstrap Cards. One question requires a Date response, so I've implemented a JQuery-UI DatePicker for that purpose. However, upon selection, the DatePicker doesn't show up.

Interestingly, when I tested the DatePicker on a field outside of the card, it displayed correctly. Upon inspecting the element and manually changing the display property from "none" to "block", the DatePicker appeared. I even tried adjusting the z-index to 1060 (a common fix for similar issues with Modals), but unfortunately, it didn't resolve the problem.

Any suggestions?

The Card:

<div class="card card-default">
        <div class="card-header">
            <div class="card-title"><strong>2</strong> - Farm Resources</div>
        </div>
        <div class="card-wrapper">
            <div class="card-body">
                <div class="">

                    <div class="card-title"><strong>Q4</strong> - When did you last soil sample?</div>
                    <div class="input-group col-md-4 mb-3">

                        <input type="text" class="form-control hasDatepicker" id="validationCustomUsername">
                        <div class="input-group-append">
                            <span class="input-group-text" id="inputGroupPrepend"><i class="far fa-calendar-alt"></i></span>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q5</strong> - How often on average are the fields soil sampled?</div>
                    <div class="col-md-4 mb-3">
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_1" value="option1" checked="">
                            <label class="form-check-label" for="Q5_1">
                                0-3 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_2" value="option2" checked="">
                            <label class="form-check-label" for="Q5_2">
                                3-6 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_3" value="option3" checked="">
                            <label class="form-check-label" for="Q5_3">
                                6-10 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_4" value="option4" checked="">
                            <label class="form-check-label" for="Q5_4">
                                10 years+
                            </label>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q6</strong> - A question requiring selection from a dropdown?</div>
                    <div class="input-group col-md-4 mb-3">

                        <div class="form-group">
                            <select class="form-control" id="exampleFormControlSelect1">
                                <option>Please select</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q7</strong> - Question with a slider?</div>
                    <div class="input-group col-md-4 mb-3">

                        <label for="amount">
                            Selected value:
                            <input type="text" id="amount" readonly="" style="border:0; color:#f6931f; font-weight:bold;width:50px;">
                        </label>
                        <div id="slider" style="width:100%;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 20%;"></span></div>
                    </div>
                </div>
            </div>
        </div>



    </div>

Javascript initialization for the datepicker:

$(function () {
    $("#validationCustomUsername").datepicker();

    $("#Date").datepicker();
});

Styling for the card (should adhere to the default Bootstrap styles):

.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}