jquery - ASP.net TextBox コントロールを使用して GridView に jQuery TimePicker を使用する

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 に基づいてテキストボックスを選択できます。