jquery datepicker not showing up in Modal window

I have a modal window which has a textbox that I want to have a datepicker on.   I believe its loading but I cant see it.  I have tried the z-index suggestions but nothing seems to make it go.  I have a picture and code.  Please let me know if anyone has any ideas on how to make this work  I thought I could run the modal window outside of a panel but when that occurred I could not update the hf fields properly.




modal windowmodal window

 <style type="text/css">
       .FormatRadioButtonList label
{
  margin-right: 15px;
  margin-left: -3px;
}
    body.modal-open .datepicker {
    z-index: 1200 !important;
}

 </style>
     <script src="../scripts/jquery-ui-1.11.2.js"></script>
    <script src="../Themes/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
</asp:Content>


<asp:Content ContentPlaceHolderID="MainContent" runat="server">

    <p>&nbsp;</p>
    <br />
      <div class="container">
    <h3><%: Title%></h3>
          <hr />
  
        <asp:UpdatePanel runat="server" ID="pnlLocation" >
            <ContentTemplate>
                <div class="row">
            <div class="col-sm-2">
                <asp:Label runat="server">Select Location:</asp:Label>
            </div>
            <div class="col-sm-4">
                <asp:DropDownList ID="ddLocations" runat="server" CssClass=" dropdown form-control" AutoPostBack="True" >
                </asp:DropDownList>

            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
                <asp:Label runat="server">Select Property:</asp:Label>
            </div>
            <div class="col-sm-4">
                <asp:DropDownList ID="ddProperties" runat="server" CssClass="dropdown form-control" AutoPostBack="True"  >
               </asp:DropDownList>
            </div>
        </div>
                <br />
            <div class="row">
                <div class="col-sm-4">
                    <asp:RadioButtonList runat="server" ID="ddType" CellPadding="30" RepeatDirection="Horizontal" CellSpacing="40" TabIndex="1" CssClass="FormatRadioButtonList" AutoPostBack="True">
                <asp:ListItem Text="Not Installed" Value="0" Selected="True"></asp:ListItem>
                <asp:ListItem Text="Installed" Value="1"></asp:ListItem>
            </asp:RadioButtonList>
                </div>
            </div>

          <br />      
            </ContentTemplate>
        </asp:UpdatePanel>
        <div class="clearfix">

                </div>
                <br />
                
          <asp:UpdatePanel runat="server" ID="pnlRecords" UpdateMode="Conditional">
             
              <ContentTemplate>
    <div class="row">
        <div class="col-sm-12">
            <asp:GridView ID="gvRecords" runat="server" CssClass="table table-bordered table-striped table-responsive pagination-ys" AllowPaging="True" AutoGenerateColumns="False"
                                    EmptyDataText="No items have been found" EmptyDataRowStyle-ForeColor="Red" FooterStyle-HorizontalAlign="Left" FooterStyle-ForeColor="Red" AlternatingRowStyle-BackColor="#CCCCCC">
                                    <Columns>
                                        <asp:TemplateField HeaderText="ID" Visible="False">
                                    <ItemTemplate>
                                        <asp:Label ID="lblID" runat="server" Text='<%# Container.DataItemIndex %>' Visible="false"></asp:Label>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                    </FooterTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="WO No.">
                                    <ItemTemplate>
                                        <asp:Label ID="lblWONum" runat="server" Text='<%# Bind("wo_number") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                         <asp:TemplateField HeaderText="Create Date">
                                    <ItemTemplate>
                                        <asp:Label ID="lblCreateDate" runat="server" Text='<%# Bind("CreatedDate", "{0:d}")%>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="BldgID">
                                    <ItemTemplate>
                                        <asp:Label ID="lblBldgID" runat="server" Text='<%# Bind("BldgID") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Unit ID">
                                    <ItemTemplate>
                                        <asp:Label ID="lblUnitID" runat="server" Text='<%# Bind("UnitID") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Room">
                                    <ItemTemplate>
                                        <asp:Label ID="lbRoom" runat="server" Text='<%# Bind("ItemGroup") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description">
                                    <ItemTemplate>
                                        <asp:Label ID="lblDescrption" runat="server" Text='<%# Bind("ItemDescription") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Qty">
                                    <ItemTemplate>
                                        <asp:Label ID="lblQty" runat="server" Text='<%# Bind("ItemQty") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Installed Date">
                                    <ItemTemplate>
                                        <asp:Label ID="lblInstalled" runat="server" Text='<%# Bind("InstalledDate", "{0:d}") %>'></asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                      </EditItemTemplate>
                                    <ItemStyle HorizontalAlign="Left" />
                                    <HeaderStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:ImageButton ID="LinkButton1" runat="server" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>'
                                            Height="20px" Width="30px" ImageUrl="../Images/Inventory1.jpg" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                                      
                </asp:GridView>

        </div>
    </div>
                  

              </ContentTemplate>
          </asp:UpdatePanel>
<div class="clearfix"></div>

        <div class="modal " id="EntryScreen" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="false">Close</button>
                 
                        <div class="row">
                            <div class="col-xs-2">
                                <asp:Label runat="server" >Bldg ID:</asp:Label>
                                
                            </div>
                            <div class="col-xs-6">
                                <asp:Label runat="server" ID="modBldgID" Font-Italic="true" ></asp:Label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <asp:Label runat="server" >Unit ID:</asp:Label>
                                
                            </div>
                            <div class="col-xs-6">
                                <asp:Label runat="server" ID="modUnitID" Font-Italic="true" CssClass="control-label"></asp:Label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2">
                                <asp:Label runat="server" >Description:</asp:Label>
                                
                            </div>
                            <div class="col-xs-6">
                                <asp:Label runat="server" ID="modDesc"  Font-Italic="true"></asp:Label>
                            </div>
                        </div>
                         <div class="row">
                            <div class="col-xs-2">
                                <asp:Label runat="server" >Work Order:</asp:Label>
                              

                            </div>
                             <div class="col-xs-6">
                                   <asp:Label runat="server" ID="modWorkOrderNo" Font-Italic="true"></asp:Label>
                             </div>
                        </div>

                    </div>
                    <div class="modal-body">
                       
                        
                        <div class="row">
                            <div class="col-xs-3">
                                <asp:Label runat="server">Install Date:</asp:Label>

                            </div>
                            <div class="col-xs-9">
                                <asp:TextBox runat="server" ID="modInstallDate" CssClass="form-control datepicker "></asp:TextBox>
                                 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                ControlToValidate="modInstallDate" ErrorMessage="Install Date is Required" text="*"
                                SetFocusOnError="True" ValidationGroup="Submit">*</asp:RequiredFieldValidator>
                            </div>
                          
                            

                        </div>
                          <div class="row">
                                <div class="col-xs-3">
                                <asp:label runat="server">Installed By:</asp:label>
                            </div>
                            <div class="col-xs-6">
                                <asp:textbox  runat="server" ID="modInstallBy" CssClass="form-control"></asp:textbox>
                            </div>
                            </div>
                        
                        <div class="row">
                            <div class="col-xs-3">
                                <asp:label runat="server">Manufacturer:</asp:label>
                            </div>
                            <div class="col-xs-6">
                                <asp:TextBox runat="server" ID ="txtManufacturer" CssClass="form-control"></asp:TextBox>
                            </div>
                            

                            </div>
                        <div class="row"> 
                                
                                 <div class="col-xs-3">
                                <asp:label runat="server">Color:</asp:label>

                            </div>
                            <div class="col-xs-6">
                                <asp:TextBox runat="server" ID="modColor" CssClass="form-control">

                                </asp:TextBox>
                            </div>
                          
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-xs-6">
                                <asp:Button runat="server" ID="btnSave" Text="Save" CssClass="btn-success ui-button" />
                                &nbsp;
                                <asp:Button runat="server" ID="btnCancel" Text="Cancel" CssClass="btn-danger ui-button" />
                            </div>
                        </div>
                    </div>
                </div>

                </div>
            </div>
                 
     
                 
                   <script type="text/javascript">

                       $(document).ready(function () {
                           $('.datepicker').datepicker();
                          
                       });
                       // Since confModal is essentially a nested modal it's enforceFocus method
                       // must be no-op'd or the following error results 
                       // "Uncaught RangeError: Maximum call stack size exceeded"
                       // But then when the nested modal is hidden we reset modal.enforceFocus
                       var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

                       $.fn.modal.Constructor.prototype.enforceFocus = function () { };

                       $confModal.on('hidden', function () {
                           $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
                       });

                       $confModal.modal({ backdrop: false });


                       //$('#ctl00_MainContent_modInstallDate').mask('99/99/9999');
    </script>



 <asp:HiddenField runat="server" ID="hfID" />
                  <asp:HiddenField runat="server" ID="hfType" />
    <asp:HiddenField runat="server" ID="hfPropID" />
    <asp:HiddenField runat="server" ID="hfRoom" />
    <asp:HiddenField runat="server" ID="hfRoomDesc" />

        </div>

Open in new window

mgmhicksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mgmhicksAuthor Commented:
just found out that if I move the modal window off the update panel the datepicker works.
mgmhicksAuthor Commented:
Here is the code that trys to fill the modal text boxes.   The values do get assigned but do not display in modal window.  The modal window comes up but no data in textboxes.


 Dim i As Integer = e.CommandArgument
        Dim cndName As String = e.CommandName
        Dim ds As New DataSet
        If e.CommandName = "Page" Then
        Else
            ds = CType(Session("dsInstalled"), DataSet)
            modBldgID.Text = ds.Tables(0).DefaultView.Item(i).Item("BldgID").ToString
            modUnitID.Text = ds.Tables(0).DefaultView.Item(i).Item("UnitID").ToString
            modWorkOrderNo.Text = ds.Tables(0).DefaultView.Item(i).Item("WO_Number").ToString
            hfID.Value = ds.Tables(0).DefaultView.Item(i).Item("ID")
            hfPropID.Value = ds.Tables(0).DefaultView.Item(i).Item("PropertyID").ToString
            modDesc.Text = ds.Tables(0).DefaultView.Item(i).Item("ItemDescription").ToString + "-" + ds.Tables(0).DefaultView.Item(i).Item("ItemGroup").ToString
            If UCase(ds.Tables(0).DefaultView.Item(i).Item("ItemGroup").ToString) = "APARTMENT" Then
                hfRoom.Value = ds.Tables(0).DefaultView.Item(i).Item("ItemDescription").ToString
            Else
                hfRoomDesc.Value = ds.Tables(0).DefaultView.Item(i).Item("ItemGroup").ToString + "-" + ds.Tables(0).DefaultView.Item(i).Item("ItemDescription").ToString
            End If
            ScriptManager.RegisterStartupScript(Page, Me.GetType(), "ClientScript", "$('#EntryScreen').modal('show');", True)

        End If

Open in new window

mgmhicksAuthor Commented:
One more thing.  When I run the gvrecords_command the first time the text fields are blank.  The 2nd time they are filling in.   However the 2nd time shows the first time and so on...
Najam UddinCommented:
I struggled a lot for this crazy issue. Update panel reloads the contents of the html. DatePicker has some unique css, and html, in short we need to recreate it after update panel refresh.

$(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
            }
        });

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mgmhicksAuthor Commented:
Sorry, this was the correct solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.