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>

模态盒有问题吗？还是datepicker属性？

请帮助

由于

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。 Datepicker可以正常工作。

Datepicker没有在Modal框中显示JQuery

3 个答案: