Home » Jquery » jquery – bootstrap date picker fails for one user but not others-Exceptionshub

jquery – bootstrap date picker fails for one user but not others-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have a jquery date picker within a modal popup. I have set a z-index of 999999999 for it to ensure is appears on top of the modal window. However, for one user the date picker appears behind the modal window. I have tried clearing the cache and restarting the machine with no luck. It works for all other users as far as I know. Any ideas on how to solve this?

Thanks for the help.

Here is some code:
Modal popup

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
        PopupControlID="pnlTimedActivityAddUpdate"
        TargetControlID="btnDummy"
        CancelControlID="lbCancel"
        BackgroundCssClass="modalBackground" />

Panel within popup

<asp:Panel ID="pnlTimedActivityAddUpdate" runat="server" CssClass="modalPopupContainer">
        <asp:Panel ID="Panel2" runat="server" CssClass="modalPopupBackground"> 
            <asp:Panel ID="Panel3" runat="server" CssClass="innerPopupPanel">
                <div class="right">
                    <asp:LinkButton ID="lbCancel" runat="server" Text="Close" CssClass="cancel" /> 
                </div>
                <div>
                    <h2><asp:Label ID="lblPopupHeader" runat="server" Text="" /></h2>
                </div>
                <center>
                    <asp:HiddenField ID="hdnTimedActivityID" runat="server" />
                    <table>
                        <tr>
                            <td align="right">Name:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtName" runat="server" Width="200px" />
                                <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="* Required" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Category:&nbsp;</td>
                            <td align="left">
                                <asp:DropDownList ID="ddlCategory" runat="server" />
                                <asp:RequiredFieldValidator ID="rfvCategory" runat="server" ControlToValidate="ddlCategory" ErrorMessage="* Required" />
                            </td>                        
                        </tr>
                        <tr>
                            <td align="right" valign="top"><br /></td>
                            <td align="left" valign="top">
                                <asp:CheckBox ID="chkUseAnticipatedTime" runat="server" Text="Use Anticipated Time" />
                                <div id="divAnticipatedTime" style="display:none">
                                    Minutes:&nbsp;<asp:TextBox ID="txtAnticipatedMinutes" runat="server" Width="25px" CssClass="right" Text="0" />&nbsp;&nbsp;&nbsp;&nbsp;
                                    Seconds:&nbsp;<asp:TextBox ID="txtAnticipatedSeconds" runat="server" Width="20px" CssClass="right" Text="0" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Require:&nbsp;</td>
                            <td align="left">
                                <asp:CheckBox ID="chkRequireVolume" runat="server" Text="Volume" />&nbsp;&nbsp;
                                <asp:CheckBox ID="chkRequireMinutes" runat="server" Text="Minutes" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Active Dates:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtStartDate" runat="server" width="70px" />&nbsp;to&nbsp;<asp:TextBox ID="txtEndDate" runat="server" width="70px" />
                                <%--<asp:TextBox ID="txtStartDate" CssClass="ineeddatepopup ineeddatemaxminvalidation" runat="server" width="70px" />&nbsp;to&nbsp;<asp:TextBox ID="txtEndDate" runat="server" width="70px" />--%>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Sort Order:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtSortOrder" runat="server" Width="25px" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><br /></td>
                            <td align="left">
                                <asp:CheckBox ID="chkActive" runat="server" Text="Active" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" valign="top">Description:&nbsp;</td>
                            <td align="left">
                                <asp:TextBox ID="txtDescription" runat="server" MaxLength="1000" TextMode="MultiLine" Columns="60" Rows="5" />        
                            </td>
                        </tr>
                    </table>
                    <br />
                    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />&nbsp;&nbsp;
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" onclick="btnCancel_Click" CausesValidation="false" />
                    <br />
                </center>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>

Attach a calendar

// Attach calendars to start/end date pickers
        $("[id$=txtStartDate]").datepicker({
            minDate: new Date(2014, 1 - 1, 1),
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true
        });

css for datepicker

.ui-datepicker {
    font-size: 85%;
    border: 2px solid maroon !important;
    z-index: 9999999999 !important;
} 

An example of a working calendar is below. When the user in question clicks into the date field, the calendar shows behind the modal popup. This is the only user that has the issue.
Working datepicker

How to&Answer: