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?datepicker end_date 仅在第一次单击“on”事件时更改，然后当下一个事件单击“on”时 end_date 上的 datepicker 不会更改？
【发布时间】：2018-05-23 03:06:48
【问题描述】：

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

    });

【问题讨论】：

标签： jquery datepicker bootstrap-datepicker

【解决方案1】：

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

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

旁注：我使用了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>

【讨论】：

【解决方案2】：

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

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

【讨论】：