0

ページでモーダルボックスを使用しています。データピッカーが追加されたテキストフィールドをクリックしても、何も表示されません。しかし、「クロムの要素を調べる」では、「hasDatepicker」クラスがすでに追加されていることがわかります。しかし、モーダルボックス内に日付ピッカーが表示されません。

モーダルボックスが存在する同じページでdatepickerを試したところ、datepickerが機能しています。

コードは

         <script>
           $(function() {
              $( "#datepicker" ).datepicker();
           });
        </script>

HTMLコードは

                    <div class="">
             <a type="button" class="openmodalbox" href="javascript:void(0);" value="Modal box" title="Add Allergy">
                       add
                   <span class="modalboxContent">
            <div class="headdin_div">Add Allergies</div>
                <table>
                    <tr><td>Allergies</td><td><input class="inp_padd" type="text"></input></td></tr>
                    <tr><td>Type</td><td><input class="inp_padd" type="text"></input></td></tr>
                     <tr> <td>First observed</td><td><input type="text" class="inp_padd" id="datepicker"></input></td></tr>
                     <tr><td></td><td><input type="submit" class="save_button_style" value="Save" /></td></tr>
                </table>      
                </span> 
                </a>    
                 </div>

モーダルボックスの問題ですか？またはdatepickerプロパティ？

助けてください

ありがとう

4

3 に答える 3

2

私はあなたのコードを少し変更しました：

<div class="">
        <a type="button" class="openmodalbox" href="#1" value="Modal box" title="Add Allergy" id="btn">add </a>
        <span class="modalboxContent">
                <div class="headdin_div">
                    Add Allergies</div>
                <table>
                    <tr>
                        <td>Allergies</td>
                        <td><input class="inp_padd" type="text"></input></td>
                    </tr>
                    <tr>
                        <td>Type</td>
                        <td><input class="inp_padd" type="text"></input></td>
                    </tr>
                    <tr>
                        <td>First observed</td>
                        <td><input type="text" class="inp_padd" id="datepicker"></input></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" class="save_button_style" value="Save" /></td>
                    </tr>
                </table>
            </span>
    </div>

そしてjs：

            $(function () {
            $("#datepicker").datepicker();


            $(".modalboxContent").dialog({
                autoOpen: false
            });

            $("#btn").click(function () {
                $(".modalboxContent").dialog('open');
            });
        });

今はうまくいっています：

http://jsfiddle.net/ye24d/

于 2012-09-20T05:48:39.110 に答える
1

問題は、モーダルボックスがz-indexプロパティを使用してすべてのものをブロックアウトするためです。datapickerのクラスをオーバーライドし、モーダルダイアログのz-indexよりも大きいz-indexプロパティを割り当てる必要があります。Datepickerは正常に動作します。

于 2012-09-20T05:34:02.960 に答える
1

これは、動作するjsFiddleデモをコード化するためのデモです。

コードを入力ファイルまたはボタンに接続し、uicssおよびjqueryuiへのリンクを追加する必要があります。あなたは上のリンクでそれを見ることができます。

htmlコード：

<label for="from">From</label>
<input type="text" id="fromDate" name="fromDate"/>
<label for="to">to</label>
<input type="text" id="toDate" name="toDate"/>

​

javaスクリプトコード：

$(function() {
        var dates = $( "#fromDate, #toDate" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "fromDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });​
于 2012-09-20T05:09:36.780 に答える