jQuery TimePicker를 ASP.net TextBox 컨트롤이있는 GridView에 사용

Question

미리 도움을 주셔서 감사합니다.

GridView ASP.net에 포함 된 TextBox 각각에 대해 jQuery의 TimePicker를 사용하려고합니다. GridView에 의해 생성 된 TextBox는 각각 다른 ID와 이름을 갖지만 GridView 구조를 만들 때 일반 TemplateField TextBox ID 만 할당 할 수 있습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SetCalendar.aspx.cs" Inherits="Application.SLA.SetCalendar" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script> 
<link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-timepicker-addon.css"></link> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript"> 
    $(function() { 
     $('#txtEntryTime').timepicker({});  }); 
</script> 
<asp:CheckBox ID="chkSelectMondayAsDefault" runat="server" 
    Text="Copiar configuración del Lunes hasta el día Viernes." Checked="true"> 
</asp:CheckBox> 
<br/> 
<br/> 
<asp:GridView ID="grvCalendar" runat="server" AutoGenerateColumns="False" 
     ShowFooter="True" > 
    <Columns> 
     <asp:BoundField HeaderText="Día" HeaderStyle-Font-Bold="true" DataField="Día" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:BoundField> 
     <asp:TemplateField HeaderText="Es laborable?" HeaderStyle-Font-Bold="true" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:CheckBox ID="chkSelectedDay" runat="server" Checked="True"/> 
      </ItemTemplate> 

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Hora de Ingreso" HeaderStyle-Font-Bold="true" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtEntryTime" runat="server" CssClass="ui-timepicker-div"></asp:TextBox> 
      </ItemTemplate> 

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Hora de Salida" HeaderStyle-Font-Bold="true" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtDepartureTime" runat="server"></asp:TextBox> 
      </ItemTemplate> 

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Hora de Inicio" HeaderStyle-Font-Bold="true" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtStartLunch" runat="server"></asp:TextBox> 
      </ItemTemplate> 

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Hora de Finalización" HeaderStyle-Font-Bold="true" 
     HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtEndLunch" runat="server"></asp:TextBox> 
      </ItemTemplate> 

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle> 

<ItemStyle HorizontalAlign="Center"></ItemStyle> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 
</asp:Content> 

나는 우리가 나를 도울 수 있기를 바랍니다 :

이

내가 사용하고 코드입니다.

정말 고마워요.

솔루션 :

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script> 
<link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-timepicker-addon.css"/> 
<link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-1.8.20.custom.css" /> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript"> 
    $(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']); 
</script> 

<ItemTemplate> 
       <asp:TextBox ID="txtEntryTime" runat="server" CssClass="ui-timepicker-div"></asp:TextBox> 
      </ItemTemplate> 

Answer 1

당신은 CssClass에 따라 텍스트 상자를 선택할 수 있습니다.