This article I will show you how you can create jQuery
Datepicker Calendar with Slide down Effect in Asp.Net using jQuery. In this press
Ctrl button and select and deselect item as you need.
Some of my previous articles are as
follows: Auto
Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery
Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5,
jQuery
Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC,
jQuery
Drag and Drop Item Functionality In Asp.Net MVC, jQuery
Slider and Range Slider Plugins, Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net.
So for this article first we will create a new asp.net application and add the below library and css reference in header of 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>
|
In header of the page add the below code and css.
<style>
.fontsize {
font-size: 11px;
}
</style>
|
<script>
$(function () {
$("#txtDatepicker").datepicker();
var effect = "slideDown";
$("#txtDatepicker").datepicker("option", "showAnim",
effect);
});
</script>
|
This code is responsible for populating calendar. Here is
the complete code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Datepicker
Calendar With Slide Down Effect 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>
.fontsize {
font-size: 11px;
}
</style>
<script>
$(function () {
$("#txtDatepicker").datepicker();
var effect = "slideDown";
$("#txtDatepicker").datepicker("option", "showAnim",
effect);
});
</script>
</head>
<body class="fontsize">
Date: <input type="text" id="txtDatepicker" size="30">
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view