在带有ASP.net文本框控件的GridView中使用jQuery时间选择器

提前感谢您的帮助

我试图在GridView ASP.net中包含的每个文本框上使用jQuery的时间选择器。GridView生成的每个文本框都有不同的ID和名称，但是当我创建GridView结构时，我只能指定general TemplateField文本框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>

$（函数（）{
$（'#txtEntryTime'）.timepicker（{}）；}）；

我希望我们能帮助我

非常感谢你

解决方案：

<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>

$（文档）.ready（函数（）{
$（“.ui timepicker div”）.timepicker（{}）；
});
$.timepicker.regional['es']={
TimeOnlytle:“Seleccione Horario”，
timeText:“Horario”，
hourText:“Horas”，
分钟文字：“分钟”，
第二个文本：“Segundos”，
currentText:'Ahora'，
closeText:'Aceptar'，
是的
};
$.timepicker.setDefaults（$.timepicker.regional['es']）；

您可以根据CssClass选择文本框。

我已经解决了我的问题，真的不难。我添加了正确的脚本和样式，并将每个文本框设置为时间选择器样式。