This article will show you how to display the jquery datepicker
with date reset button for current date in asp.net. In this
we will get two buttons in the Today and Done. With the help of Today button we
can reset the selected date in the calendar.
Some of my previous articles are as follows: jQuery
Articles, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList, Get
RadioButton Value Using jQuery In Asp.Net, jQuery
Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net. jQuery
DatePicker Calendar With Slide Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Fold Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Drop Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Clip Effect on TextBox Click In Asp.Net, jQuery
DatePicker Calendar With Blind Effect on TextBox Click In Asp.Net, jQuery
Datepicker Calendar With Fold Effect Using jQuery In Asp.Net.
So for this article first we will create a new asp.net application and add the below jquery and css library into the page.
So for this article first we will create a new asp.net application and add the below jquery and css library into the page.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now we will use the below mention jquery code in your page
header.
<script type="text/javascript">
$(function
() {
$("#<%=txtDatepicker.ClientID
%>").datepicker({
showButtonPanel: true
});
});
</script>
|
After code we will add the textbox control to display the calendar.
After combining all the code your page code will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication2.WebForm8"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
body
{
font-size:
12px;
}
</style>
<script type="text/javascript">
$(function
() {
$("#<%=txtDatepicker.ClientID
%>").datepicker({
showButtonPanel: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Select Date:
<asp:TextBox ID="txtDatepicker" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
|
Now run the code to check the output.
About the Author
0 comments:
Please let me know your view