将引导程序日期时间选择器添加到C#中中继器内的TextBox中

Add bootstrap datetimepicker to TextBox inside a repeater in C#

本文关键字：中继器 TextBox 日期 引导程序 时间 选择器 添加      更新时间：2023-09-26

这是我的中继器代码

<asp:Repeater ID="RepeaterTrackingInformation" runat="server" OnItemDataBound="RepeaterTrackingInformation_ItemDataBound">
    <HeaderTemplate>
        <table class="table table-condensed table-responsive">
            <tr>
                <th>Department</th>
                <th>SentTo Date</th>
                <th>Approved Date</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
            <tr>
                <td>
                    <asp:Label ID="LabelDepartmentName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Department") %>'></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBoxSentTo" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SentTo") %>'></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBoxApproved" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ReceivedFrom") %>'></asp:TextBox>
                </td>
            </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
</asp:Repeater>

一切都很好。我需要在每个TextBox中添加一个引导日期时间选择器，我可以用下面的例子来完成，比如这个

$('#datetimepickerStartDate').datetimepicker({
    pickTime: false
});

这是我的玉米饼。如何使用jQuery或JavaScript在中继器内附加.datetimepicker。我无法访问TextBoxSetTo，因为.NET生成不同的动态ID。

我试过这个

var rep = $('<%=RepeaterTrackingInformation.ClientID%>');

在中继器中添加CssClass：

<asp:Repeater ID="RepeaterTrackingInformation" runat="server" OnItemDataBound="RepeaterTrackingInformation_ItemDataBound">
<HeaderTemplate>
    <table class="table table-condensed table-responsive">
        <tr>
            <th>Department</th>
            <th>SentTo Date</th>
            <th>Approved Date</th>
        </tr>
</HeaderTemplate>
<ItemTemplate>
        <tr>
            <td>
                <asp:Label ID="LabelDepartmentName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Department") %>'></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBoxSentTo" CssClass="datepicker"  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SentTo") %>'></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="TextBoxApproved" CssClass="datepicker"  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ReceivedFrom") %>'></asp:TextBox>
            </td>
        </tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

然后在javascript:中

$('.datepicker').datetimepicker({
    pickTime: false
});
相关文章：