0

我试图将 jquery datepicker 输入文本放在绝对定位的 div 中。单击输入字段时不会显示日期选择器日历，显然是因为日历 div 也定位为绝对位置。如果我将父 div 的位置更改为相对位置，则会显示选择器。但我要求 div 绝对定位。解决方案是什么？

<div id="createWizard" style="position:absolute !important">    
    <table height="100%" width="100%" style="height:100%;width:100%;background:transparent;" align="center" valign="center" cellpadding="5">
        <tr height="100%" style="width:100%">
            <td id="wayptsTray">
                <table height="100%" width="100%" valign="top">

                    <tr height="15%" id="StartTimeRow">
                        <td width="100%">
                            <table width="100%" height="100%" valign="middle">
                                <tr height="33.3%">
                                    <td align="left" colspan="2" nowrap>
                                        <span class="wizardHeader" id="routeStartTimeHeader">route time</span>  
                                    </td>
                                </tr>
                                <tr height="33.3%">
                                    <td align="left" width="50%" nowrap>
                                        <span class="wizardHeader" id="startDateHeader">date</span>
                                    </td>
                                    <td align="left" width="50%" nowrap>
                                        <span class="wizardHeader" id="startTimeHeader">time</span>
                                    </td>
                                </tr>
                                <tr height="33.3%">
                                    <td align="left" width="50%" nowrap>
                                        <!--div style="position:relative !important;width:100%;height:100%"-->
                                        <input type="text" class="litedark datepicker popupFrmArea datePickerInput datePickerText whitebg" name="startDate"  id="startDate" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important;"/>
                                        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</font>
                                        <!--/div-->
                                    </td>
                                    <td align="left" width="50%" nowrap>
                                        <input type="text" class="litedark popupFrmArea datePickerInput datePickerText whitebg" name="startTime"  id="startTime" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important"/>
                                        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important">*</font>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr height="65%" id="wayptsRow">
                        <td width="100%">
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
    </table>
</div>

日期选择器代码：

    var today=new Date();
    var expiryLimit=25;
    var curryear=today.getFullYear();
    $("#startDate.datePickerInput").datepicker({
        minDate:today,
        maxDate:"+"+expiryLimit+"y",
        yearRange:curryear+":"+curryear+expiryLimit,
        changeMonth:true,
        changeYear:true
    });
    $( "#startDate.datePickerInput" ).datepicker( "setDate", today );
4

1 回答 1

1

这可能会：

<table height="100%" width="100%" style="position: relative; height:100%;width:100%;background:transparent;" align="center" valign="center" cellpadding="5">

-- 添加position: relative;到表格样式。在这种情况下，日期选择器将相对于表格元素定位。

这可能是最好的，因为您通常希望日期选择器会在触发它的输入元素旁边弹出：

<td align="left" width="50%" nowrap>
    <div style="position:relative !important;width:100%;height:100%">
        <input type="text" class="litedark datepicker popupFrmArea datePickerInput datePickerText whitebg" name="startDate"  id="startDate" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important;"/>
        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</font>
    </div>
</td>

主要概念是绝对定位元素使用具有相对位置的下一个祖先作为参考。

顺便说一句，考虑使用<span>元素代替过时 <font>的元素（某些浏览器可能无法识别），如下所示：

<span color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</span>
于 2015-07-19T09:39:26.957 回答