如何在从第一个日期选择器中选择 DATE 时在第二个日期选择器中设置 DATE？

Question

我正在尝试在从第一个 date-picker 选择日期时为 date-picker 设置一个日期，并且希望在用户选择另一个日期时显示一条警报消息。我做不到。

这是我的代码：

$('#ELEdatepicker1').datepicker({
      autoclose: true,
      endDate: new Date(),
      todayHighlight: true,
    }).change(function(){
      getELEdifference($(this),$('#ELEdatepicker2'));
    });
    $('#ELEdatepicker2').datepicker({
      autoclose: true,
      startDate: new Date(),
      todayHighlight: true,
    }).change(function(){
      getELEdifference($('#ELEdatepicker1'),$(this));
      alert('Are you sure ?');
    });

  function getELEdifference($this1,$this2)
  {
    if($this1.datepicker("getDate") != null && $this2.datepicker("getDate") != null)
    {
      var ELEcertDiff= $this1.datepicker("getDate") - $this2.datepicker("getDate");    
      var result = ELEcertDiff / (1000 * 60 * 60 * 24) * -1;
      //$("#ELEcertDiff").text(result);
      document.getElementById("ELEcertDiff").value = result;
    }
  }

如何在第二个日期选择器中显示日期（假设一年后）？如果用户在一年之前或之后选择，它将在日期选择时显示警报消息。

更新： 是否可以传递参数来设置第二个日期选择器的差异？ 对于前。 在上图中，如果我从 Issue Date-picker 中选择一个日期，并从 duration 下拉列表框中选择一个值（例如 3），则在 Expiry Date-picker 中显示从所选日期起 3 年后的日期。

我提出了一些问题：

Jquery UI : date picker. How to set date in date picker by $_GET

Define start date of second date picker from first date picker

我是 JavaScript 和 JQuery 的新手。欢迎任何形式的帮助。提前致谢。

Answer 1

请添加并检查此代码：

$('#ELEdatepicker1').datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat:'dd-mm-yy',
    onClose: function( selectedDate ) {
        var d = new Date(selectedDate);
        var day = d.getDate();
         var month = d.getMonth();
         var year = d.getFullYear() + 1;
        var newdate = month + "-" + day + "-" + year;
        $( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
         $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    }
});

$('#ELEdatepicker2').datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat:'dd-mm-yy',
    onClose: function( selectedDate ) {
        $("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
        $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    }
});

Answer 2

查看此答案

<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>
<input type="text" id="ELEdatepicker1">
<input type="text" id="ELEdatepicker2">
<!-- <input type="text" id="ELEcertDiff"> -->
<script>
$('#ELEdatepicker1').datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat:'dd-mm-yy',
    onClose: function( selectedDate ) {
        var d = new Date(selectedDate);
        var year = d.getFullYear() + 1;
        var month = d.getMonth();
        var day = d.getDate();
        var newdate = year + "-" + month + "-" + day;
        $( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
         $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    }
});

$('#ELEdatepicker2').datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat:'dd-mm-yy',
    onClose: function( selectedDate ) {
        $("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
        $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    }
});
</script>