This article will show you how you can create a date picker calendar
with fold effect using jquery in asp.net
Some of my previous articles are as follows: Dynamic
Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC, jQuery
Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button,
jQuery
Datepicker Calendar Open On Image Button Click in Asp.net, Autocomplete
Textbox Using jQuery In Asp.Net and C#.Net..
So for this article first we will create a new asp.net
application and add the below mention 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 code into your header of the page.
<style>
body
{
font-size:11px;
}
</style>
<script>
$(function
() {
$("#<%=txtdatecal.ClientID
%>").datepicker();
$("#<%=txtdatecal.ClientID
%>").datepicker("option", "showAnim",
'fold');
});
</script>
|
In above code I have specified the effect the for bouncing
the calendar.
Now here is the complete code of the page.
<%@ 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 Fold Effect Using jQuery 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>
body
{
font-size:11px;
}
</style>
<script>
$(function
() {
$("#<%=txtdatecal.ClientID
%>").datepicker();
$("#<%=txtdatecal.ClientID
%>").datepicker("option", "showAnim",
'fold');
});
</script>
</head>
<body>
<form id="form1" runat="server">
DOB : <asp:TextBox runat="server" ID="txtdatecal"></asp:TextBox>
</form>
</body>
</html>
|
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view