Javascript 在asp.net内容页和repeater控件中使用jquery日期时间选择器

我需要在asp.net应用程序的内容页中添加java脚本标记。该脚本可以很好地处理html标记，但在内容上它不起作用的是代码。 这是显示日期时间选择器的代码：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link  rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery.ui.min.js"></script>
    <script type="text/javascript" >
        $(function dtTimePicker()
        {
            $("txtDate").datepicker({
                dateFormat: 'dd-MM-yyyy',
                changeMonth: true,
                changeYear:true

            });
        });
    </script>
    <hr />
    <asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
    <asp:Button runat="server" ID="btnDate" Text="Search" OnClick="btnDate_Click"></asp:Button>
    <hr />
    <div class="container">
        <div class="form-horizontal">
            <div class="form-group">
                <div class="col-md-2"></div>
            </div>
        </div>
        <h1>MANHOUR</h1>
        <hr />
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">DAILYDATAWH</div>
            <asp:Repeater ID="rptrDAILYDATAWH" runat="server">
                <HeaderTemplate>

                    <table class="table">
                        <thead>
                            <tr>
                                <th>STATUSIN</th>
                                <th>NIP</th>
                            </tr>
                        </thead>
                        <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <th><%# Eval("STATUSIN") %></th>
                        <th><%# Eval("NIP") %></th>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="defaultItem" runat="server" 
                        Visible='<%# rptrDAILYDATAWH.Items.Count == 0 %>' Text="No items found" />
                        </tbody>
                    </table>
                </FooterTemplate>
            </asp:Repeater>    
        </div>
    </div>
</asp:Content>

我想在

STATUSIN

中过滤datetime，并从数据库中获取具有所选日期的记录。如何使用repeater控件将jquery日期时间选择器放置在内容页中？

通过“不工作”，我想您的意思是日期选择器不能正确呈现

首先，

$（“txtDate”）.datepicker（{

-您没有包含ID选择器，因此它应该是

$（“#txtDate”）.datepicker（{

但是，在中继器中，

$（“txtDate”）.datepicker（{

不适用于您的

，因为中继器中的文本框的每个实例都不会将“txtDate”作为其ID；它将具有一个生成的ID，命名容器（中继器）将生成。如果使用浏览器调试工具检查HTML，则可以对此进行确认

如果您所需要做的只是将textbox呈现为jQuery日期选择器，请改用类选择器，即

并将jQuery更改为

---

$（“.datepick”）.datepicker（{

您的代码有一些问题，例如您在

onload

中调用

dtTimePicker

，或者您在选择输入时使用了错误的选择器

txtDate

。此外，年份的格式也不正确，但不是很重要

无论您想在中继器内部还是外部显示日期选择器，都要为控件的

CssClass

属性分配一个类，如

datepicker

。然后在document ready中，使用类选择器调用select

.datepicker

，并对其应用日期选择器

示例

我假设您正在寻找一个最小的工作示例，因此我将分享一个最小的工作示例作为您的起点。这是一个非常小的示例，您可以在不使用任何代码的情况下进行测试。只需复制以下代码并粘贴到

Form1.aspx

文件中，然后浏览

Form1.aspx

即可查看以下输出：

表格1
$（函数（）{
$（“.datepicker”）.datepicker({
日期格式：“dd-MM-yy”，
变化月：对，
变化年：对
});
});
名称
出生日期
受保护的无效页面加载（对象发送方、事件参数e）
{
TextBox1.Text=DateTime.Now.ToString（“dd-MMMM-yyyy”）；
var dt=新的System.Data.DataTable（）；
添加（“名称”，类型（字符串））；
添加（“出生日期”，类型（日期时间））；
dt.Rows.Add（“马里奥快车”，新日期时间（1980年11月5日））；
添加（“皮蒂巡洋舰”，新日期时间（1975年7月9日）；
Repeater1.DataSource=dt；
Repeater1.DataBind（）；
}

或

或

---

将找到id属性以lblName结尾的元素，例如foo lblName。

日期选择器的CDN错误，请尝试替换此属性

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery.ui.min.js

这样做（注意

jquery.ui

和

jqueryui

之间的区别）

然后尝试用html组件替换datepicker的asp:net组件，并使用$（'#…'）选择id

$（函数dtTimePicker（）{
$（“#txtDate”）.datepicker({
日期格式：“dd-MM-yyyy”，
变化月：对，
变化年：对
});
});

男子气概

谢谢你的帮助。我一直在尝试使用

$（“#txtDate”）.datepicker进行更改。datepicker

并尝试使用CssClass，但仍然不起作用。datetime picker仍然没有出现。因此，当你将CssClass添加到文本框时，你是否也将jQuery选择器更新为

$（.datepick”）

？（或者无论你的类名是什么）如果这不起作用，您是否在浏览器调试控制台中收到任何错误？是的，我确实更新了jQuery选择器，但仍然不起作用。我在浏览器调试控制台中没有收到任何错误当我单击某个按钮时，它实际上起作用了，因为它显示了标签项：“未找到项”。但是，为什么日期时间选择器仍然没有出现？感谢您的帮助，但是如果它作为内容页，它是否有效？因为，我有母版页，并且希望将日期时间选择器放置在内容页中。是的，它会起作用。我只是尝试尽可能减少示例，以便于验证，并成为您实现目标的良好起点您需要。您可以将头部的所有脚本和样式标记放入母版页。重点在于使用css类和document ready。但是，它没有显示如何像这样连接母版页

MasterPageFile=“~/AdminMaster.master”

我尝试通过不使用母版页、甚至不使用代码隐藏文件、不使用db来尽量减少示例。看起来您知道如何使用母版页或如何使用代码隐藏文件。如果您在应用解决方案时遇到任何具体问题，请告诉我您遇到了什么复杂性或问题

<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Form1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $(".datepicker").datepicker({
                dateFormat: 'dd-MM-yy',
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Date:" Font-Bold="true" />
            <asp:TextBox ID="TextBox1" runat="server" CssClass="datepicker" />
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <table>
                        <tr>
                            <th>Name</th>
                            <th>Birth date</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Eval("Name") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="BirthDateTextBox" runat="server" CssClass="datepicker"
                                Text='<%# Eval("BirthDate", "{0:dd-MMMM-yyyy}") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Now.ToString("dd-MMMM-yyyy");
        var dt = new System.Data.DataTable();
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("BirthDate", typeof(DateTime));
        dt.Rows.Add("Mario Speedwagon", new DateTime(1980, 11, 5));
        dt.Rows.Add("Petey Cruiser", new DateTime(1975, 7, 9));
        Repeater1.DataSource = dt;
        Repeater1.DataBind();
    }
</script>

 $(function dtTimePicker()
        {
            $("#<%=txtDate.ClientID%>").datepicker({
                dateFormat: 'dd-MM-yyyy',
                changeMonth: true,
                changeYear:true

            });
        });

 $("#txtDate") 

$(".txtDate") 

$("#<%=txtDate.ClientID%>")

<asp:TextBox runat="server" ID="txtDate" ClientIDMode="Static"/> 

$('#<%=txtDate.ClientID%>') 

$("[id$=lblName]")

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery.ui.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

   <pre>
    <head runat="server">
        <title></title>
          <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link  rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
        <script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" >
            $(function dtTimePicker() {
                $("#txtDate").datepicker({
                    dateFormat: 'dd-MM-yyyy',
                    changeMonth: true,
                    changeYear: true
    
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
        <input type="text" id="txtDate"/>
        <asp:Button runat="server" ID="btnDate" Text="Search" OnClick="btnDate_Click"></asp:Button>
        <hr />
        <div class="container">
            <div class="form-horizontal">
                <div class="form-group">
                    <div class="col-md-2"></div>
                </div>
            </div>
            <h1>MANHOUR</h1>
            <hr />
        </div>
    </pre>