This article will show you how you can create a jquery
datepicker calendar with slide down and slide up effect in asp.net. When user
click on textbox a jquery datepicker calendar will appear with slide down
effect and open with slide up effect.
Some of my previous articles are as follows: Shopping
Cart Example to Drag and Drop Item in Cart In Asp.Net MVC Using jQuery, Password
Strength Validation in Asp.net MVC Using jQuery, Bind
jQuery DatePicker Calendar In MVC WebGrid and Retrive Value Using Asp.net MVC,
C#.Net, Resizable
Gridview Using jQuery in Asp.Net, jQuery
Datepicker Calendar With Restrict Date Range in Asp.net, jQuery
Datepicker Calendar Open On Image Button Click in Asp.net, jQuery
Datepicker Calendar With Multiple Months in Asp.net, Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, jQuery
UI Calender Open With LightBox Effect in Asp.Net MVC, How
to Use jQuery Calender In MVC3 | jQuery UI Datepicker Calender Control In
Asp.Net Mvc Application.
So for this article first we will create a new asp.net
application and add the below jquery library reference in your page header.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.1/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.1/jquery-ui.js"></script>
|
After adding library add the below mention code into your
header section.
<script>
$(function
() {
$("#<%=txtCalendar.ClientID
%>").datepicker();
$("#<%=txtCalendar.ClientID
%>").datepicker("option", "cal",
"slideDown");
});
</script>
|
In above code I have opened the calendar and after that
assign the effect.
Now here is the complete code of your page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3"
%>
<!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 Slide Down and Slide Up Effect In Asp.Net</title>
<style>
body
{
font-size:11px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/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.1/jquery-ui.js"></script>
<script>
$(function
() {
$("#<%=txtCalendar.ClientID
%>").datepicker();
$("#<%=txtCalendar.ClientID
%>").datepicker("option", "showAnim",
"slideDown");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span>Select
Date: </span><asp:TextBox ID="txtCalendar"
runat="server"></asp:TextBox>
</div>
</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