Question

<html>

<head>       
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>

<div id="DateBetween">
    <div class="col-lg-3">
        Date From
        <input type="text" ID="txtDateFrom" class="form-control" runat="server" />
        <script type="text/ecmascript">
            $(document).ready(function () {
                $("#txtDateFrom").datepicker({
                    dateFormat: "dd-mm-yy",
                    changeYear: true,
                    changeMonth: true,
                    showAnim: "fold",
                    yearRange: "2013:2017"
                });
                $("#txtDateFrom").focus(function () {
                    $("#datepick").datepicker("show");
                });
                $("#txtDateFrom").focus();
            });
        </script>
    </div>
    <div class="col-lg-3">
    Date To
        <input type="text" ID="txtDateTo" class="form-control" runat="server" >
        <script type="text/ecmascript">
        $(document).ready(function () {
            $("#txtDateTo").datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                showAnim: "fold",
                yearRange: "2013:2017"
             });
            $("#txtDateTo").focus(function () {
                $("#datepick").datepicker("show");
            });
            $("#txtDateTo").focus();
        });
        </script>
    </div>
 </div>

更新

我正在使用jquery-3.1.1 。当我在Runsnippet上添加Jquery-3.1.1 cdn时，它无效。所以我在 Snippet
上添加 jquery-1.12.4.js
在我的情况下，它第一次表现得很完美。但是，当用户点击显示为片段输出
的文本框时，其余时间

我有一个日期选择日历。当用户单击文本框时，将显示日期选择器日历。

问题是用户第一次点击文本框时，它完全显示了datepicker而没有任何问题，如下所示

当我单击文本框外部的缪斯并再次尝试单击ext框时，它不会完全显示。它显示如下

以下是显示日期选择器的浏览器代码

<div id="ui-datepicker-div" 
    class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" 
    style="position: absolute; 
           top: 470px; left: 618.25px; 
           z-index: 1; margin: 0px; 
           height: 231.422px; clip: rect(0px 238px 15px 0px); 
           display: block;">

请以正当理由给我解决方案

由于

Answer 1

不要使用showAnim：＆＃34; fold＆＃34;因为它会每次都创造一个问题。我为datepicker尝试了不同的js，发现这个选项存在问题（showAnim：＆＃34; fold＆＃34;）。

＆＃13;

$(document).ready(function(){

$('#txtDateFrom').datepicker();
$('#txtDateFrom').focus(function(){
    $('#txtDateFrom').datepicker('show');
});
$('#txtDateTo').datepicker();
$('#txtDateTo').focus(function(){
    $('#txtDateTo').datepicker('show');
});
$.datepicker.setDefaults({
  dateFormat: "dd-mm-yy",
  changeMonth: true,
  changeYear: true,                
  yearRange: "2013:2017"       
});

});

＆＃13;

.col-lg-3{
  float:left;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>   
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="DateBetween">
    <div class="col-lg-3">
        Date From
        <input type="text" id="txtDateFrom" class="form-control" runat="server" />
        </div>
    <div class="col-lg-3">
    Date To
        <input type="text" id="txtDateTo" class="form-control" runat="server" >       
    </div>
 </div>

＆＃13;

如何使用css在我的场景中设置z-index？

1 个答案: