In this article I am explain how to use the jQuery UI DatePicker plugin with the ASP.Net TextBox
Control. First of all, to start with jQuery UI, you need to download
latest jQuery UI from here or you can use jQuery cdn.
To start first,we need
to include jQueryUI js and jQueryUI Css file on top.
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
/>
<script src="//code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"
type="text/javascript"></script>
Place a textbox on the
page, which will be used to bind the datepicker control to it.
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
Now let's place the
datepicker control.
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker();
});
</script>
Designer Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery DatePicker to ASP.Net TextBox</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
/>
<script src="//code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
changeYear: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'calendar.png'
});
});
</script>
<script type="text/javascript">// calender with month and year
$(function () {
$("[id$=txtDate1]").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'calendar.png'
});
});
</script>
<script type="text/javascript"> // calender
with month and show current date
$(function () {
$("[id$=txtDate2]").datepicker({
changeMonth: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'calendar.png',
showAnim: 'fadeIn',
buttonText: 'Show Date'
});
$("#<%=txtDate2.ClientID%>").datepicker('setDate', 'today');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate"
runat="server"
ReadOnly="true"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="txtDate1"
runat="server"
ReadOnly="true"></asp:TextBox><br />
<br />
<asp:TextBox ID="txtDate2"
runat="server"
ReadOnly="true"></asp:TextBox><br />
<br />
<br />
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
OnClick="btnSubmit_Click"
/>
</div>
</form>
</body>
</html>
Code Behind:
Fetch the value of the
TextBox server side
protected void
btnSubmit_Click(object sender, EventArgs e)
{
string date = Request.Form[txtDate.UniqueID] + " "
+ Request.Form[txtDate1.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(),
"alert", "alert('"
+ date + "');", true);
}