时间戳

首页 > 解决方案 > 如何使两个日期选择器在 html 中相互依赖？

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

问题描述

假设有两个日期选择器。第二个日期选择器将完全取决于片段中给出的第一个日期选择器

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

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

标签： javascriptjquery

解决方案

您在选择第一个日期选择器时为第二个日期选择器设置默认日期，反之亦然。这是一个例子。

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

推荐阅读