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?
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

0
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

0
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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.
0
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
0

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..
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.