4

私は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" />       


$(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をmaxに設定して、選択できるようにします。

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

それが役に立てば幸い ：）

于 2013-03-25T09:36:16.297 に答える