JQuery Ui Datepicker in Updatepanel - Asp.net
Demo and Code for how to implement jQuery UI Date picker in Updatepanel Asp.net
by Athil
Posted on 27 Jun 2018 Category: Asp.net
Views: 2807
Here I am going to show how to implement jquery UI datepicker in Updatepanel.
DEMO
Before I wrote an article how to implement Jquery UI date picker in Asp.net The same way we can bring the datepicker and after that make the following changes.
Aspx changes
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox>
..........
</ContentTemplate>
</asp:UpdatePanel>
Javascript
function datepickerInitial()
{
$("#<%= TxtStartDate.ClientID %>").datepicker();
}
$(document).ready(function () {
datepickerInitial();
});
var reloadEvent = Sys.WebForms.PageRequestManager.getInstance();
reloadEvent.add_endRequest(function () {
datepickerInitial();
});
Full Demo Code
ASPX
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<link type="text/css" rel ="stylesheet" href= "/css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/css/DatePicker.css" />
<h1>Demo Jquery Datepicker in update panel </h1>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox>
<asp:Button ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
<script type="text/javascript" src="/js/jquery.min.js" >
</script>
<script type="text/javascript" src="/js/jquery-ui.js">
</script>
</html>
Javascript
<script>
function datepickerInitial()
{
$("#<%= TxtStartDate.ClientID %>").datepicker();
}
$(document).ready(function () {
datepickerInitial();
});
var reloadEvent = Sys.WebForms.PageRequestManager.getInstance();
reloadEvent.add_endRequest(function () {
datepickerInitial();
});
</script>
C# Code
protected void btn1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), "ScriptName", "<script>alert('Selected Date "+TxtStartDate.Text+" ');</script>", false);
}