Question

假设有两个日期选择器。第二个日期选择器将完全依赖于代码段中给出的第一个日期选择器

＆＃13;

$( 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)
	        }
	    });  
	   
	});

＆＃13;

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

＆＃13;

如果我们从第一个日期选择器中选择一个日期，那么如果我们将第二个日期选择器留空，那么第二个日期选择器的日期将设置为与第一个日期相同的日期，但是在一年之后。这意味着如果我们将日期设置为07-29-2018，那么如果我们将第二个日期选择器留空，则日期将自动设为07-29-2019。有没有办法做到这一点。可以任何身体请帮助我。谢谢。

Answer 1

您可以在第一个日期选择器上选择第二个日期选择器的默认日期，反之亦然。这是一个例子。

＆＃13;

$( 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)
	        }
	    });  
	   
	});

＆＃13;

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

＆＃13;

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

1 个答案: