datepicker jQuery UI doesn´t show properly

Question

I do have a contact form (MVC View)with a jQuery UI datepicker, in the form the datepicker is above a textbox control as shows in the image below

my problem is that when the user displays the datepicker to select a date, it shows the textbox in the calendar so the month cannot be displayed correctly as shows in the image below

this is the script code of my datepicker

 $("#datepicker").datepicker({
            dayNamesMin: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            dateFormat: 'dd/mm/yy',
            showAnim: "fold"
        });

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

and the code of my form

 <div class="col-xs-10">
                    my datepicker
                    <div class="input-group">
                        <span class="input-group-addon">
                            <input type="checkbox" aria-label="Radio button for following text input" id="chk3">
                        </span>
                        <input type="text" id="datepicker">
                    </div>
                </div>
                <br />
                <br />
                <div class="col-xs-10">
                    The textbox
                    <div class="input-group">
                        <span class="input-group-addon">
                            <input type="checkbox" aria-label="Radio button for following text input" id="chk1">
                        </span>
                        <input type="text" class="form-control" aria-label="Text input with radio button" id="txt1">
                    </div>
                </div>

and the libraries imported as cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js">
</script>

    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <link rel=" stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

could you please help me and tell me how to show the datepicker properly?

Answer 1

Use this css and fix it!

.ui-datepicker {
    z-index: 1336 !important;
}