Question

我有一个带有jQuery UI datepicker的联系表单（MVC View），其形式是datepicker位于文本框控件上方，如下图所示

我的问题是，当用户显示日期选择器以选择日期时，它会在日历中显示文本框，因此月份无法正确显示，如下图所示

这是我的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();

和我的表格代码

 <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>

并将库导入为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">

你可以帮助我并告诉我如何正确显示日期选择器吗？

Answer 1

使用此css并修复它！

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

datepicker jQuery UI没有正确显示

1 个答案: