use jquery datetime picker inside an asp.net content page and repeater control
Question
I need to add java script tag in content page of asp.net application. The script works fine with html tags but in content it is not working here is the code. This is my code to display datetime picker :
<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>
and this is my code on backend :
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();
}
I want to filter datetime in STATUSIN and get the records from database with selected date. How to place jquery datetime picker inside content page with repeater control?
4 answers
solution1
4 ACCPTED 2020-11-02 20:36:52
Your CDN for the datepicker is wrong try replacing this
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery.ui.min.js
with this (notice the diff between jquery.ui and jquery-ui ).
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
And try replace the asp:net component for the datepicker with html component and select the id by using $('#...')
<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>
solution2
0 2020-02-19 05:38:37
By "doesn't work" I presume you mean the datepicker doesn't render correctly ?
Firstly, $("txtDate").datepicker({ - you haven't included an ID selector, so it would be $("#txtDate").datepicker({
However inside a repeater, $("txtDate").datepicker({ is not going to work for your <asp:TextBox runat="server" ID="txtDate"> because each instance of the textbox inside your repeater is not going to have 'txtDate' as its ID; it will have a generated ID that the naming container (the repeater) will generate. If you inspect the HTML using browser debug tools you can confirm this.
If all you need to do is render the textbox as a jQuery datepicker, use a Class selector instead, ie
<asp:TextBox runat="server" ID="txtDate" CssClass="datepick">
and change your jQuery to
$(".datepick").datepicker({
solution3
0 2020-02-22 15:16:16
Your code have a few problems, for example you are calling the dtTimePicker in onload or you are a wrong selector txtDate to select the input. Also the format of the year is incorrect, however not very important.
No matter you want to show the date picker inside the repeater or outside of repeater, assign a class like datepicker to the CssClass attribute of the control. Then in document ready, call select .datepicker using the class selector and apply date picker on it.
Example
I assume you are looking for a minimal working example, so I will share a minimal working example as your start point. Here is a very minimal example that you can test without any code behind. Just copy the following code and paste in a Form1.aspx file and browse the Form1.aspx to see the following output:
<%@ 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>
solution4
0 2020-02-26 17:09:05
$(function dtTimePicker()
{
$("#<%=txtDate.ClientID%>").datepicker({
dateFormat: 'dd-MM-yyyy',
changeMonth: true,
changeYear:true
});
});
This is Incorrect $("txtDate") as there is no html tag like txtDate.
Use
$("#txtDate")
or
$(".txtDate")
or
$("#<%=txtDate.ClientID%>")
try
<asp:TextBox runat="server" ID="txtDate" ClientIDMode="Static"/>
to have txtDate as static id in html also.
$('#<%=txtDate.ClientID%>')
will find an element with the id attribute as supplied by the ClientID property in ASP.Net.
$("[id$=lblName]")
will find an element with an id attribute that ends with lblName, for example foo-lblName.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.