在我正在处理的项目中,我正在使用JQuery datepickers。我在一页上有两个日期选择器,并且我需要将第二个日期选择器初始化为比第一个日期选择器早一年(例如,如果datepicker1
设置为1/1/2019,我需要将datepicker2
设置为设置为2020年1月1日)。
我在下面有当前的JavaScript:
<script type="text/javascript">
$(document).ready(()=>{
$('#datepicker1').datepicker();
$('#datepicker1').datepicker("option", "dateFormat","dd-mm-yy");
$('#datepicker2').datepicker();
$('#datepicker2').datepicker("option", "dateFormat","dd-mm-yy");
});
</script>
我不太熟悉datepicker API。如何使第二个日期选择器比第一个日期选择器早一年启动?
最佳答案
$(document).ready(function(){
$('#datepicker1').datepicker();
$('#datepicker2').datepicker();
$('#datepicker1').on('change',function(){
$( "#datepicker2" ).datepicker( "destroy" );
var minDate= $('#datepicker1').datepicker( "getDate" );
minDate.setDate(minDate.getDate() + 365);
console.log(minDate);
$( "#datepicker2" ).datepicker({ minDate: new Date(minDate) });
});
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<body>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
</body>
</html>
您可以通过将更改事件写入datepicker1来实现。为了限制日期选择,只需将minDate属性设置为datepicker2。为了检查1年的差距,我在这里增加了365天,在某些情况下,您可以寻求另一种逻辑可能是错误的。
我希望这能帮到您。