This article will show you how you can create a jquery calendar
using jquery with blind effect in asp.net textbox.
So for this article first we will create a new asp.net
application and on page add the below jquery library reference.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/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.2/jquery-ui.js"></script>
|
Now add the below jQuery function on header of the page.
<script>
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker();
$("#<%=TextBox1.ClientID
%>").datepicker("option", "showAnim",
"blind");
});
</script>
|
Now here check the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!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 Calendar With Blind Effect on TextBox Click In Asp.Net </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/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.2/jquery-ui.js"></script>
<style type="text/css">
body
{
font-size:11px;
}
.style1
{
height:
41px;
width:
120px;
}
.style2
{
height:
41px;
width:
142px;
}
</style>
<script>
$(function
() {
$("#<%=TextBox1.ClientID
%>").datepicker();
$("#<%=TextBox1.ClientID
%>").datepicker("option", "showAnim",
"blind");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td align="right" class="style1">
DOB
</td>
<td align="left" class="style2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Now we will check the output.
About the Author
0 comments:
Please let me know your view