how to set daterange in jquery datepicker for 30 days

how to set daterange in jquery datepicker for 30 days.

from date & end date should not be greater than today's date and can go back to 30 days max.
LVL 20
chaitu chaituAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

chaitu chaituAuthor Commented:
30 days range is coming.but when user selects end date as 5th may then from date should be on on before 5th may.remaining dates should be disabled.if user selects from date as 6th may then end date must be more than 6th may.

<script type="text/javascript">

	$(function() 
			{  

	    $.datepicker.setDefaults({
	        changeMonth: true,
	        changeYear: false,
	        dateFormat: 'dd/mm/yy'});
        
	    $('#datepicker1').datepicker({
	        minDate: '-30d',
	        maxDate: '+0d',
	        onSelect: function(dateStr) {
	            var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
	            var max = new Date(min.getTime());
	          //  max.setMonth(max.getMonth() + 1); // Add one month
	            $('#date_retour').datepicker('option', {minDate: min, maxDate: max});
	        }
	    });
	    
		    $('#datepicker2').datepicker({
		    	  minDate: '-30d',
			        maxDate: '+0d',
		        onSelect: function(dateStr) {
	
		            var max = $(this).datepicker('getDate'); // Selected date or null if none
		            $('#date_depart').datepicker('option', {maxDate: max});
	
		        }
	
		    });

      
			});

</script>

</head>
    <body>
    
            from  :<input type="text" id="datepicker1"/><br/>
            to  :<input type="text" id="datepicker2"/><br/>
         
          
    </body>

Open in new window

hieloCommented:
You need to provide a callback via beforeShowDay so you can control precisely which day to disable.

Reference:
http://api.jqueryui.com/datepicker/#option-beforeShowDay

Try the code below:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Restrict date range</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>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    //$( "#datepicker" ).datepicker({ minDate: -30, maxDate: "-1d" });

	$.datepicker.setDefaults({
	        changeMonth: true,
	        changeYear: false,
	        dateFormat: 'dd/mm/yy'});
        
	    $('#datepicker1').datepicker({
	        minDate: '-30d',
	        maxDate: '+0d',
	
			beforeShowDay:function(start_date){
				var result=[true,"",""];

				//get the value of the "end_date"
				var end_date = $('#datepicker2').val();

				//check if it is not empty
				if( end_date )
				{
					// then convert it to a date object
					end_date=new Date( $.datepicker.parseDate('dd/mm/yy',end_date) );
					
					// when result[0]==false, the day is disabled from selection
					// when result[1]==true,  the day is enabled for selection
					result[0]= (start_date.valueOf() <= end_date.valueOf());
				}
				return result;
			},
			
	        onSelect: function(dateStr) {
	            var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
	            var max = new Date(min.getTime());
	          //  max.setMonth(max.getMonth() + 1); // Add one month
	            $('#date_retour').datepicker('option', {minDate: min, maxDate: max});
	        }
	    });
	    
		    $('#datepicker2').datepicker({
		    	  minDate: '-30d',
			        maxDate: '+0d',
		        onSelect: function(dateStr) {
	
		            var max = $(this).datepicker('getDate'); // Selected date or null if none
		            $('#date_depart').datepicker('option', {maxDate: max});
	
		        }
	
		    });
	
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 <hr/>
  from  :<input type="text" id="datepicker1"/><br/>
  
            to  :<input type="text" id="datepicker2"/><br/>
</body>
</html>

Open in new window

Rainer JeschorCommented:
Hi,
this works:
$(function() 
			{  

	    $.datepicker.setDefaults({
	        changeMonth: true,
	        changeYear: false,
	        dateFormat: 'dd/mm/yy'});
        
	    $('#datepicker1').datepicker({
	        minDate: '-30d',
	        maxDate: '+0d',
	        onSelect: function(dateStr) {
	            var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
	            var max = new Date(min.getTime());
	          //  max.setMonth(max.getMonth() + 1); // Add one month
	            $('#datepicker2').datepicker('option', {minDate: new Date (min.getTime() + (1000*60*60*24))});
	        }
	    });
	    
		    $('#datepicker2').datepicker({
		    	  minDate: '-30d',
			        maxDate: '+0d',
		        onSelect: function(dateStr) {
	
		            var max = $(this).datepicker('getDate'); // Selected date or null if none
		            $('#datepicker1').datepicker('option', {maxDate: new Date(max.getTime()-(1000*60*60*24)) });
	
		        }
	
		    });

      
			});

Open in new window


Live sample:
http://jsbin.com/saziti/99/edit?html,js,output

HTH
Rainer
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

chaitu chaituAuthor Commented:
Rainer Jeschor,

its working fine but in one condition its not working.

1)not able to select todays date.
2)if user select from date as 4th june then end date can also select as todays date.user can select same date as from date and todate.
Rainer JeschorCommented:
Hi,
OK, from the original description I assumed that the same day could not be selected. Anyway, here an update:
http://jsbin.com/wonibu/2/edit?html,js

$(function() 
{  
	$.datepicker.setDefaults({
		changeMonth: true,
		changeYear: false,
		dateFormat: 'dd/mm/yy'});
        
	$('#datepicker1').datepicker({
		minDate: '-30d',
		maxDate: '+0d',
		onSelect: function(dateStr) {
			var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
			var max = new Date(min.getTime());
			//  max.setMonth(max.getMonth() + 1); // Add one month
			$('#datepicker2').datepicker('option', {minDate: min});
		}
	});
	    
	$('#datepicker2').datepicker({
		minDate: '-30d',
		maxDate: '+0d',
		onSelect: function(dateStr) {
			var max = $(this).datepicker('getDate'); // Selected date or null if none
			$('#datepicker1').datepicker('option', {maxDate: max });
		}
    });
});

Open in new window


HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chaitu chaituAuthor Commented:
excellent buddy..
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.