datepicker end_date 仅在第一次单击 "on" 事件时更改，然后在下一个事件单击 "on" 时 end_date 上的 datepicker 不更改？

Question

  $("#start_date").datepicker({
      format: 'yyyy-mm-dd',
      // startDate: '-3d'
      autoclose: true,
      endDate: '+0days'

    }).on('changeDate', function(e) {
      var end_date = '';
      end_date = $("#start_date").val();
      //  var end_date2 = moment(end_date).add('1', 'days');

      var date2 = '';
      date2 = $('#start_date').datepicker('getDate', '+1d');
      date2.setDate(date2.getDate() + 30);

      $("#end_date").val(end_date).datepicker({
        format: 'yyyy-mm-dd',
        startDate: end_date,
        autoclose: true,
        endDate: date2
      });

    });

Answer 1

尝试在“.on”调用后立即添加以下一项或两项：

e.preventDefault();
e.stopPropagation();

Answer 2

之所以没有改变，是因为每次进行更改时，您都过度分配了日期选择器，所以您正在堆积东西，您应该这样做。

我们首先初始化两个选择器，然后每次 开始更改时 转到一个函数为我们更新结束选择器的值。

旁注： 我使用 moment.js 因为这样更容易添加天数。 至少对我来说更容易

$("#start_date").datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
  endDate: '+0days'

}).on('changeDate', function(e) {
  let start_date = $('#start_date').datepicker('getDate', '+0d');
  let end_date = moment(start_date).add('31', 'days');
  setMinMax(start_date, end_date);
});

$("#end_date").datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
});

function setMinMax(startDate, endDate) {
  let $endPicker = $("#end_date");

  //This a moment function
  $endPicker.val(endDate.format('YYYY-MM-DD')); 
  $endPicker.datepicker('setStartDate', startDate);
  //We parse the moment object to JS date,
  //so that way we    don't have problems
  $endPicker.datepicker('setEndDate', endDate.toDate()); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br/>
<div class="span5 col-md-5" id="sandbox-container">
  <input id="start_date" class="form-control" type="text">
  <br/>
  <input id="end_date" class="form-control" type="text">
</div>

datepicker end_date 仅在第一次单击 "on" 事件时更改，然后在下一个事件单击 "on" 时 end_date 上的 datepicker 不更改？

datepicker end_date only changes the first time the "on" event is clicked, then when the next event click "on" the datepicker on end_date not change?

jquery

datepicker

bootstrap-datepicker