在 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