JQM and DatePicker submit button under pop-up calendar has focus

Question

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" is fired and the date is not selected?

stack overflow post seems to address similar behavior but I don't understand how to apply fix in my situation;

jquery-ui datepicker change z-index

pre-calendar

with calendar:

with calendar

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

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

found in other SO post after determining it to be related to z-index:

Trouble with jQuery Dialog and Datepicker plugins

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

edited May 23 '17 at 11:57

Community

1
1

answered Nov 02 '14 at 02:54

BarclayVision

865
2
12
41

JQM and DatePicker submit button under pop-up calendar has focus

1 Answers1