Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery- Show multiple months in datepicker

Apr 26, 2012
Introduction: 

In this article I will explain how to implement JQuery calendar control with multiple months in asp.net.
Description:
  
In previous post I explained
JQuery datepicker calendar control and calendar control with dropdownlist selection for month and year. Now I will explain how to show JQuery calendar with multiple months in asp.net.

If we use Ajax calendar control we don’t have a chance to display these type custom options and need to write some custom css classes to change ajax calendar control style other Ajax calendar will be like this

Instead of making all these changes its better to use JQuery UI calendar control to customize based on our requirements. If we want to show multiple months in JQuery calendar control no need to make many change just by set some basic properties we can achieve this functionality.

To implement this one first open Visual Studio and create new website after that write following code in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>

<style type="text/css">
.ui-datepicker
{
font-size: 8pt !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b>
<asp:TextBox ID="txtDate" runat="server" />
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css classes by using those files we will display calendar control with beautiful css style. You can get those files by downloading attached sample.

After completion of aspx page design and your code modifications just run your application and check your calendar control that would be like below demo

Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Senthildss said...

How shall i work this at using master page.

Unknown said...

how it can use in content place holder by masterpage?

Unknown said...

it is not working with content place holder ,how to implement same with content placeholder

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.