ASP .NET and jQuery DatePicker
Hello folks… I believe all of you are doing fine.
I am Mohammed Shirajum Monir, a Senior Level Management, Administration,
HR and ICT Personnel, from Dhaka, Bangladesh. I can be reached through my website: http://msmonir.webs.com.
Today I am going to show an example for using jQuery DatePicker
with ASP .NET. I am trying to keep this article simple and short. Let’s get started.
First of all the following code block shows our simple ASP .NET
page containing a textbox and a button. I named the textbox as txtDate and the button as btnSubmit.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDatePicker.aspx.cs" Inherits="jQueryDatePicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mohammed Shirajum Monir</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="True"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
For adding jQuery features, we first have to add the references
of the jQuery family. Usually these are added into the head section. So, the resulted
code block would be:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDatePicker.aspx.cs" Inherits="jQueryDatePicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mohammed Shirajum Monir</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="True"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
Now, we have completed the steps to add jQuery references into
our ASP .NET page. Its time to add a simple javascript in the head section which
will connect the textbox with calendar. After adding the function the resulting
page will be as below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDatePicker.aspx.cs" Inherits="jQueryDatePicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mohammed Shirajum Monir</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
//
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="True"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
The result output is:
In the document ready event of jQuery I am applying
the DatePicker plugin to the ASP.Net TextBox using the [id$=txtDate] jQuery
Selector so that even if the ClientID of the Control changes it will not
affect the jQuery code.
Fetching the values server side
In order to show how to fetch the value of the
TextBox server side I have added a button btnSubmit with a click event handler.
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
string dtDate = Request.Form[txtDate.UniqueID];
}
If this article helped you, please like my page [https://www.facebook.com/pages/Mohammed-Shirajum-Monir/103095096482274]
for more tutorials.
