日期选择器未显示在模态框 JQuery 中

Question

我在我的页面中使用模态框。当我单击添加数据选择器的文本字段时，它没有显示任何内容。但是在“检查 chrome 元素”中，我可以看到“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> 

是模态框的问题吗？还是日期选择器属性？

请帮忙

谢谢

Answer 1

我稍微修改了你的代码：

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

Answer 2

这里是代码的演示 jsFiddle Demo

您需要将代码连接到输入文件或按钮，并添加指向 ui css 和 jquery ui 的链接。您可以在上面的链接中看到它。

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 );
            }
        });
    });​

Answer 3

问题是因为您的模态框使用 z-index 属性屏蔽了所有内容。您必须覆盖 datapicker 类并将其 z-index 属性分配为大于模态对话框的 z-index。日期选择器可以正常工作。