title: Using jQuery TimePicker into a GridView with ASP.net TextBox control
body: <p>thank you in advance for your help.</p>
  
  <p>I'm trying to use the TimePicker of jQuery on each one of the TextBox included in a GridView ASP.net. Each one of the TextBox generated by the GridView has a different ID and Name, but when I create the GridView Structure I can only assign the general TemplateField TextBox ID.</p>
  
  <p>This is the code I'm using:</p>
  
  <pre><code> &lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SetCalendar.aspx.cs" Inherits="Application.SLA.SetCalendar" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt;
  &lt;script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-timepicker-addon.css"&gt;&lt;/link&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('#txtEntryTime').timepicker({});       });
  &lt;/script&gt;
  &lt;asp:CheckBox ID="chkSelectMondayAsDefault" runat="server" 
      Text="Copiar configuración del Lunes hasta el día Viernes." Checked="true"&gt;
  &lt;/asp:CheckBox&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;asp:GridView ID="grvCalendar" runat="server" AutoGenerateColumns="False"  
          ShowFooter="True" &gt;
      &lt;Columns&gt;
          &lt;asp:BoundField HeaderText="Día" HeaderStyle-Font-Bold="true" DataField="Día"
          HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:BoundField&gt;
          &lt;asp:TemplateField HeaderText="Es laborable?" HeaderStyle-Font-Bold="true"
           HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:CheckBox ID="chkSelectedDay" runat="server" Checked="True"/&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;   
          &lt;asp:TemplateField HeaderText="Hora de Ingreso" HeaderStyle-Font-Bold="true"
           HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtEntryTime" runat="server" CssClass="ui-timepicker-div"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;   
          &lt;asp:TemplateField HeaderText="Hora de Salida" HeaderStyle-Font-Bold="true"
           HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtDepartureTime" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;  
          &lt;asp:TemplateField HeaderText="Hora de Inicio" HeaderStyle-Font-Bold="true"
           HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtStartLunch" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;  
          &lt;asp:TemplateField HeaderText="Hora de Finalización" HeaderStyle-Font-Bold="true"
           HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtEndLunch" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
  
  &lt;HeaderStyle HorizontalAlign="Center" Font-Bold="True"&gt;&lt;/HeaderStyle&gt;
  
  &lt;ItemStyle HorizontalAlign="Center"&gt;&lt;/ItemStyle&gt;
          &lt;/asp:TemplateField&gt;  
      &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>I hope we can help me.</p>
  
  <p>Thank you so much.</p>
  
  <p>Solution:</p>
  
  <pre><code>&lt;script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-timepicker-addon.css"/&gt;
  &lt;link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-1.8.20.custom.css" /&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".ui-timepicker-div").timepicker({});
      });
      $.timepicker.regional['es'] = {
          timeOnlyTitle: 'Seleccione Horario',
          timeText: 'Horario',
          hourText: 'Horas',
          minuteText: 'Minutos',
          secondText: 'Segundos',
          currentText: 'Ahora',
          closeText: 'Aceptar',
          ampm: true
      };
      $.timepicker.setDefaults($.timepicker.regional['es']);
  &lt;/script&gt;
  
  &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtEntryTime" runat="server" CssClass="ui-timepicker-div"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
  </code></pre>