Question

我正在使用jQuery UI datepicker和jQuery mobile。当显示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" />

$(function() {

    $( "#txtAnkomstLS" ).datepicker({ 
   });

    $( "#txtAvresaLS" ).datepicker({ 

    });

});

http://jsfiddle.net/wQRDx/4/

Answer 1

一个肮脏的解决方案是使用覆盖

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

演示：Fiddle

Answer 2

以下是您的问题的解决方法，它将窗口小部件的z-index设置为max，因此可以选择它。

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

希望有所帮助：）

当重叠其他表单元素时，jQuery datepicker不起作用

2 个答案: