CODEWITHSUNDEEP
javascriptjquery
gourav
gourav

Reputation: 177

How to make a two date picker depend on each other in html?

Suppose there are two date pickers. The second date picker will be fully depended on the first one as given in the snippet 

$( function() {
		$("#txtFromDate").datepicker({
	        numberOfMonths: 2,
	        minDate:0,
	        onSelect: function(selected) {
	          $("#txtToDate").datepicker("option","minDate", selected)
	        }
	    });
	    $("#txtToDate").datepicker({ 
	        numberOfMonths: 2,
	        onSelect: function(selected) {
	           $("#txtFromDate").datepicker("option","maxDate", selected)
	        }
	    });  
	   
	});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
From: <input type="text" id="txtFromDate" />
			        To: <input type="text" id="txtToDate" />

If we select a date from the first date picker is there any method if we leave empty the second date picker then the date of second date picker will set to the same date as the first but after the one year. It means if we set the date in first is 07-29-2018 then if we left empty the second date picker then the date will automatically taken as 07-29-2019. Is there any method for doing this. can any body please help me. Thank you.

Upvotes: 0

Views: 2729

Answers (1)

Kiran Shahi
Kiran Shahi

Reputation: 7980

You set default date for second datepicker on select of first datepicker and vice versa. Here is an example.

$( function() {
		$("#txtFromDate").datepicker({
	        numberOfMonths: 2,
	        minDate:0,
	        onSelect: function(selected) {
	          $("#txtToDate").datepicker("option","minDate", selected);
           $("#txtToDate").datepicker("setDate", '+1y');
	        }
	    });
	    $("#txtToDate").datepicker({ 
	        numberOfMonths: 2,
	        onSelect: function(selected) {
	           $("#txtFromDate").datepicker("option","maxDate", selected)
	        }
	    });  
	   
	});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


  From: <input type="text" id="txtFromDate" />
  To: <input type="text" id="txtToDate" />

Upvotes: 3

Related Questions