jQuery Datepicker not working for textbox inside ASP.Net Gridview

Last Reply on Jun 02, 2012 02:59 AM By Mudassar

Posted on Jun 02, 2012 02:59 AM

Sir,

I have used jquery datepicker calender javascript to popup calendar when mouse clicks on textbox. The textbox is in Gridview. It will appear only when click on edit button. 

Now, textbox has an ID and i have used that ID to call jquery calendar. but it's not working....

But when i simply place a textbox on page then it would popping up the calendar, but not on gridview textbox. Below is the code i am using: 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>View All</title>
 
    
    <!-- For JQUERY calendar -->
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function() {
    $("#txt2").datepicker();
    
  });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    
           <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
               ForeColor="#333333" GridLines="None" Width="758px">
               <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
               <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
               <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
               <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
               <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
               <EditRowStyle BackColor="#999999" />
               <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
              <Columns>
               
               <asp:TemplateField HeaderText="Register Date">
                <EditItemTemplate>
                 <asp:TextBox ID="txt2" Text='<%# Bind("RegisterDate1") %>' runat="server"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                 <asp:label ID="lbl2" runat="server" Text='<%# Bind("RegisterDate1") %>'></asp:label>
                </ItemTemplate>
               </asp:TemplateField>
               
               <asp:TemplateField HeaderText="Edit">
                <EditItemTemplate>
                 <asp:Button ID="btnUpdate" runat="server" Text="Update" CausesValidation="false" CommandName="Update" />&nbsp;
                 <asp:Button ID="btnCancel" runat="server" Text="Ignore" CausesValidation="false" CommandName="Cancel" />
                </EditItemTemplate>
                <ItemTemplate>
                 <asp:Button ID="btnEdit" runat="server" Text="Edit" CausesValidation="false" CommandName="Edit" />
                </ItemTemplate>
               </asp:TemplateField>
               
               <asp:TemplateField HeaderText="Delete">
                
                <ItemTemplate>
                 <asp:Button ID="btnDelete" runat="server" Text="Delete" CausesValidation="false" CommandName="Delete" />
                </ItemTemplate>
               </asp:TemplateField>
              </Columns>
           </asp:GridView>
      
    </form>
</body>
</html>