datepicker end_date изменяется только при первом нажатии на событие «on», затем, когда следующее событие щелкает «on», указатель даты на end_date не изменяется? - PullRequest
Новая
       6

datepicker end_date изменяется только при первом нажатии на событие «on», затем, когда следующее событие щелкает «on», указатель даты на end_date не изменяется?

0 голосов
/ 23 мая 2018 
  $("#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
      });

    });

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Причина, по которой ничего не меняется, заключается в том, что вы перевыбираете средство выбора даты каждый раз, когда вносится изменение, поэтому вы накапливаете вещи, как вы должны это сделать.

Сначала мы инициализируем обазатем каждый раз, когда при начальном изменении переходят к функции, которая обновляет для нас значения конечного сборщика.

Примечание: Я использовал 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>
0 голосов
/ 23 мая 2018

Попробуйте добавить одно или оба из следующих значений сразу после вызова .on: 

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