当与其他表单元素重叠时，jQuery日期选择器不工作

我将jQueryUIDatePicker与jQueryMobile一起使用。 当jQuery datepicker显示并与其他表单元素重叠时，它将不会选择所选日期。而是选择背景表单元素。有没有办法解决这个问题，让它工作

<table width="100%"><tr><td><label for="txtAnkomstLS">Date 1:</label>  </td><td><label for="txtAvresaLS">Date 2:</label>   </td></tr><tr><td>

<input type="text" id="txtAnkomstLS" data-mini="true" /></td><td>             
<input type="text" id="txtAvresaLS" data-mini="true" /></td></tr></table>



<label for="select-choice-3" class="select">Field 1:</label>
            <table width="100%">                
            <tr><td width="50%">        <select name="select-choice-1" id="select-choice-1" data-mini="true"  data-theme="c">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>

            </select></td><td width="50%">      <select name="select-choice-2" id="select-choice-2" data-mini="true"  data-theme="c">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>

            </select></td></tr></table>


<label for="select-choice-3" class="select">Field 2:</label>
            <table width="100%">                
            <tr><td width="50%">        <select name="select-choice-3" id="select-choice-3" data-mini="true"  data-theme="c">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>

            </select></td><td width="50%">      <select name="select-choice-4" id="select-choice-4" data-mini="true"  data-theme="c">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>

            </select></td></tr></table>


         <label for="search">Textinput:</label>
         <input type="text" id="search" value=""  data-mini="true" />       

---

这是解决您问题的一个方法，它将小部件的z索引设置为最大，因此可以选择它

$.datepicker.setDefaults({
    beforeShow: function ( input, inst ) {
        inst.dpDiv.css({
            zIndex: function(index, value) {
                return $.ui.dialog.maxZ + 1;
            }
        });
    }
});

---

希望有帮助：）

一个糟糕的解决方案是使用覆盖

$.datepicker.setDefaults({
    beforeShow: function ( input, inst ) {
        setTimeout(function(){
            inst.dpDiv.css({
                zIndex: 10000
            });
        })
    }
});

---

演示：

@Avishek没有名为

$.ui.dialog.maxZ的属性，您的解决方案不起作用。更新演示小提琴并检查您是否want@Avishek请查看此演示，看看您的解决方案是否非常有效！！工作起来很有魅力！节省了很多工作！：）：）感谢您的时间和帮助：）但下面的解决方案是可行的。在所有主流浏览器中都测试过。是的，但毫无疑问，它不能正常工作。无论如何，谢谢你：）
$.datepicker.setDefaults({
    beforeShow: function ( input, inst ) {
        setTimeout(function(){
            inst.dpDiv.css({
                zIndex: 10000
            });
        })
    }
});