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

Set month/year date range in JQuery datepicker control using asp.net

Apr 27, 2012
Introduction: 

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

Suppose now if we want to allow user to select only within 10 or 15 days or 1 month range then we can set those values very easily and previously I explained calendar control with dropdownlist selection for month and year for that we can set how many years range we display it in year dropdown.

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() {
$("#txtMonthRange").datepicker({
minDate: 0,
maxDate: '+1M',
showButtonPanel: true
});
$("#txtYearRange").datepicker({
changeMonth: true,
changeYear:true,
yearRange:'1970:2010'
})
});

</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Month Range:</b> <asp:TextBox ID="txtMonthRange" runat="server"/>
<b>Year Range:</b><asp:TextBox ID="txtYearRange" 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.

If you observe script in header section

$("#txtMonthRange").datepicker({
minDate: 0,
maxDate: '+1M',
showButtonPanel: true
});
In above script

minDate: I set it as 0 means it won’t allow us to select before today date

maxDate: Here I set as  '+1M' means it will allow us to select upto one month dates.
If we want to set to 10 days range then we will change '+1M' to '+10'

other function will be

$("#txtYearRange").datepicker({
changeMonth: true,
changeYear:true,
yearRange:'1970:2010'
})
In above function I set yearRange: '1970:2010' in year dropdown that will display years from  1970 to 2010

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

2 comments :

$UNNY said...
This comment has been removed by the author.
Anonymous said...

Hey
Can you tell me ,after setting the year range, How to set a particular year in the Year_DropDownList. Like if i set yearRange :'1950:1994' , there i want 1994 to be selected ?.

Thanks

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.