DatetimePicker on the modal not displaying completely

Question

The Datetimepicker is not displaying fully in the Bootstrap v3.3.7 model, despite my attempts to present it there. The date time picker is partially visible and partially hidden; similarly, the issue also arises in a responsive manner (on small device like mobile). I've attached two images that demonstrate the issue in detail.

The HTML code here is

<!-- Admission All modal dialog -->
<div class="modal fade" id="AdmissionAllModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- modal header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title text-center" id="myModalLabel">فہرست داخلہ دارجہ وار</h4>
            </div>
            <!-- /end modal header -->

            <!-- modal body -->
            <div class="modal-body">
                <h4>داخلہ کی درجہ وار فہرست حاصل کرنے کے لیے ابتدائی اور آخری تاریخ کا اندراج کریں۔</h4>
                <form id="AdmissionAllFormModal" method="post" action="onlineadmission/AdmissionAllReport.php">
                    <div class="form-group">
                        <label class="loginLabel">ابتدائی تاریخ</label>
                        <div class="input-group datetimePicker1">
                            <input class="datetimePicker1 form-control" type="text"> 
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="loginLabel">آخری تاریخ</label>
                        <div class="input-group datetimePicker1">
                            <input class="datetimePicker1 form-control" type="text"> 
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </span>
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <input class="btn btn-primary" type="submit" name="SubmitToDelete" value="تلاش کریں۔">
                </form>
            <!-- /modal footer -->
        </div>
    </div>
</div>
<!-- end Admission All modal dialog -->

I'm using Bootstrap Datetimepicker version 4.17.47 and Bootstrap v3.3.7. Is there anyone who can assist me in displaying Datetimepicker fully on the popup model? as in the example image

Answer 1

I found the solution by making overflow: visible. Now the correct answer is given below code here

.modal-content {
  overflow: visible;
}

Answer 2

Try making the date picker to not rely on the modal, and the modal size. Add to modal css:

.modal{
    position:absolute;
    z-index:1
 }