如何使两个日期选择器在html中相互依赖？

Question

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.

Answer 1

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" />