弹出日历下的JQM和DatePicker提交按钮有焦点答案

【问题标题】：JQM and DatePicker submit button under pop-up calendar has focus弹出日历下的JQM和DatePicker提交按钮有焦点
【发布时间】：2014-12-28 16:32:31
【问题描述】：

When a pop up calendar displays for selecting a date, the calendar pops up over the "update selection" button, when a date is selected that is within the area of the submit button that is under the calendar - the "update selection " 被解雇并且没有选择日期？

堆栈溢出帖子似乎解决了类似的行为，但我不明白如何在我的情况下应用修复；

jquery-ui datepicker change z-index

带日历：

<ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true">

            <li data-role="list-divider">
                <h2 id="itemTitle">
                FDID: <asp:Label ID="LabelFDID" runat="server" Text='<%# Session("FDID")%>' Font-Bold="True" Font-Size="Medium"></asp:Label>
            </h2>
            </li>

            <li>1st Day:            
                <asp:TextBox ID="CHOICE1TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE1HiddenField" runat="server" Value='<%# Bind("CHOICE1")%>' /></li>

            <li>2nd Day:    
                <asp:TextBox ID="CHOICE2TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE2HiddenField" runat="server" Value='<%# Bind("CHOICE2")%>' /></li>

            <li>3rd Day:              
                <asp:TextBox ID="CHOICE3TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE3HiddenField" runat="server" Value='<%# Bind("CHOICE3")%>' /></li>

            <li>4th Day:              
                <asp:TextBox ID="CHOICE4TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE4HiddenField" runat="server" Value='<%# Bind("CHOICE4")%>' /></li>

            <li>5th Day:              
                <asp:TextBox ID="CHOICE5TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE5HiddenField" runat="server" Value='<%# Bind("CHOICE5")%>' /></li>

            <li>6th Day:              
                <asp:TextBox ID="CHOICE6TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE6HiddenField" runat="server" Value='<%# Bind("CHOICE6")%>' /></li>

            <li>7th Day:              
                <asp:TextBox ID="CHOICE7TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox>
                <asp:HiddenField ID="CHOICE7HiddenField" runat="server" Value='<%# Bind("CHOICE7")%>' /></li>


        </ul>

        <ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true">

                <asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                    Text="Update Selections"></asp:Button>
                <asp:Button ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                    Text="Cancel"></asp:Button> 

        </ul>

【问题讨论】：

标签： jquery-mobile datepicker

【解决方案1】：

在确定它与 z-index 相关后在其他 SO 帖子中找到：

Trouble with jQuery Dialog and Datepicker plugins

<style type="text/css">
.ui-datepicker
{
    z-index: 1003 !important; /* must be > than popup editor (1002) */
}
</style>

【讨论】：