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

Question

我需要在 asp.net 应用程序的内容页面中添加 java script 标签。 该脚本适用于 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>

这是我在后端的代码：

 protected void btnDate_Click(object sender, EventArgs e)
        {
            HtmlGenericControl body = (HtmlGenericControl)Page.Master.FindControl("pagebody");
            body.Attributes.Add("onload", "dtTimePicker();");
            String CS = ConfigurationManager.ConnectionStrings["MANHOURConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(CS);
            con.Open();
            SqlCommand cmd = new SqlCommand("SELECT * FROM [dbo].[DAILYDATAWH] WHERE STATUSIN=@STATUSIN", con);
            cmd.Parameters.AddWithValue("@STATUSIN", txtDate.Text);
            DataTable dtDaily = new DataTable();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            sda.Fill(dtDaily);

            rptrDAILYDATAWH.DataSource = dtDaily;
            rptrDAILYDATAWH.DataBind();
        }

我想过滤STATUSIN日期时间并从数据库中获取所选日期的记录。 如何将 jquery 日期时间选择器放置在带有转发器控件的内容页面中？

Answer 1

您用于日期选择器的 CDN 错误尝试替换它

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

有了这个（注意jquery.ui和jquery-ui之间的差异）。

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

并尝试用 html 组件替换 datepicker 的 asp:net 组件并使用 $('#...') 选择 id

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

Answer 2

通过“不起作用”，我认为您的意思是日期选择器无法正确呈现？

首先， $("txtDate").datepicker({ - 你没有包含一个 ID 选择器，所以它会是$("#txtDate").datepicker({

但是在转发器中， $("txtDate").datepicker({对您的<asp:TextBox runat="server" ID="txtDate">因为转发器内的每个文本框实例都不会将“txtDate”作为其 ID；它将具有命名容器（转发器）将生成的生成 ID。如果您使用浏览器调试工具检查 HTML，您可以确认这一点。

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

<asp:TextBox runat="server" ID="txtDate" CssClass="datepick">

并将您的 jQuery 更改为

$(".datepick").datepicker({

Answer 3

您的代码有一些问题，例如您在onload中调用了dtTimePicker或者您选择了错误的选择器txtDate来选择输入。 年份的格式也不正确，但不是很重要。

无论您想在转发器内部还是在转发器外部显示日期选择器， datepicker控件的CssClass属性分配一个类似datepicker的类。 然后在文档准备好后，使用类选择器调用 select .datepicker并在其上应用日期选择器。

例子

我假设您正在寻找一个最小的工作示例，因此我将分享一个最小的工作示例作为您的起点。 这是一个非常小的示例，您可以在没有任何代码的情况下进行测试。 只需复制以下代码并粘贴到Form1.aspx文件中，然后浏览Form1.aspx以查看以下输出：

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

Answer 4

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

            });
        });

这是不正确的 $("txtDate") 因为没有像 txtDate 这样的 html 标签。

用

 $("#txtDate")

或者

$(".txtDate")

或者

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

尝试

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

也将 txtDate 作为 html 中的静态 id。

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

将查找具有 id 属性的元素，该属性由 ASP.Net 中的 ClientID 属性提供。

$("[id$=lblName]")

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

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

问题描述

4 个解决方案

解决方案1
4 已采纳 2020-11-02 20:36:52

解决方案2
0 2020-02-19 05:38:37

解决方案3
0 2020-02-22 15:16:16

解决方案4
0 2020-02-26 17:09:05

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

问题描述

4 个解决方案

解决方案1 4 已采纳 2020-11-02 20:36:52

解决方案2 0 2020-02-19 05:38:37

解决方案3 0 2020-02-22 15:16:16

解决方案4 0 2020-02-26 17:09:05

解决方案1
4 已采纳 2020-11-02 20:36:52

解决方案2
0 2020-02-19 05:38:37

解决方案3
0 2020-02-22 15:16:16

解决方案4
0 2020-02-26 17:09:05