4

我将 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/

4

2 回答 2

4

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

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

演示：小提琴

于 2013-03-25T10:40:21.367 回答
1

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

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

希望能帮助到你 ：）

于 2013-03-25T09:36:16.297 回答