title: ASP.NET DatePicker not working inside GridView
body: <p>I have a database table with person information that also has their Date of Birth. I'm using <code>GridView</code> to display the fields and also using Column edit and delete options. To edit date im using <code>DatePicker</code> as follows,</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;Home Page&lt;/title&gt;
  &lt;link rel='stylesheet' type='text/css' href='Styles/Main.css'/&gt;
  &lt;script type="text/javascript" src="Scripts/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Scripts/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#text_date').datepicker({
              dateFormat: 'dd-mm-yy',
              inline: true,
              showOtherMonths: true,
              changeMonth: true,
              changeYear: true,
              constrainInput: true,
              firstDay: 1,
              navigationAsDateFormat: true,
              showAnim: "fold",
              yearRange: "c-100:c+10",
              dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
          });
      });
      $(document).ready(function () {
          $('#text_dateadd').datepicker({
              dateFormat: 'dd-mm-yy',
              inline: true,
              showOtherMonths: true,
              changeMonth: true,
              changeYear: true,
              constrainInput: true,
              firstDay: 1,
              navigationAsDateFormat: true,
              showAnim: "fold",
              yearRange: "c-100:c+10",
              dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Inside <code>GridView</code> within the Columns i have the following. Im using the footer area to insert new data into the <code>GridView</code></p>
  
  <pre><code>&lt;asp:TemplateField HeaderText="Date of Birth" SortExpression="DOB"&gt;
  &lt;EditItemTemplate&gt;
      &lt;asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server" Text='&lt;%# Bind("DOB", "{0:dd/MM/yyyy}") %&gt;'&gt;&lt;/asp:TextBox&gt;    
  &lt;/EditItemTemplate&gt;
  &lt;ItemTemplate&gt;
      &lt;asp:Label ID="label_date" runat="server" Text='&lt;%# Bind("DOB", "{0:dd/MM/yyyy}") %&gt;'&gt;&lt;/asp:Label&gt;
  &lt;/ItemTemplate&gt;
  &lt;FooterTemplate&gt;
      &lt;asp:TextBox ID="text_dateadd" CssClass="textbox" MaxLength="10" runat="server" Text='&lt;%# Bind("DOB", "{0:dd/MM/yyyy}") %&gt;'&gt;&lt;/asp:TextBox&gt;
  &lt;/FooterTemplate&gt;
  &lt;/asp:TemplateField&gt;
  </code></pre>
  
  <p>But this is not working, I tried clicking on the text fields both within the <code>EditItemTemplate</code> and <code>ItemTemplate</code> but the calendar wont display. I tried it on a simple web page as below and it works,</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Within a normal <code>div</code> in a form the date picker works but in the above <code>GridView</code> it wont work.. am i doing something wrong? is it because of the <code>Bind</code> method? If so how can i solve that? I tried using <code>div</code> inside <code>GridView</code> also but it wont work.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The below is the place where i placed my gridview. Im using my grid view within a cell of a table and i also have script manager and update panels</p>
  
  <pre><code>&lt;asp:TableCell ColumnSpan="6" Width="100%" Height="100%" VerticalAlign="Middle" HorizontalAlign="Center"&gt;
      &lt;asp:UpdatePanel ID="update_data" runat="server"&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:GridView&gt;&lt;/asp:GridView&gt;
          &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
  &lt;asp:/TableCell&gt;
  </code></pre>