Расчет продолжительности и отображение в календаре - PullRequest
Новая
       15

Расчет продолжительности и отображение в календаре

1 голос
/ 22 марта 2019

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

Я использую календарь из: http://www.daterangepicker.com

$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left',
  }, function(start, end, label) {
     document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
     document.getElementById('return_date').value = end.format('YYYY-MM-DD');

//Calculation of Duration:
var date1 = new Date(start.format('YYYY-MM-DD'));
var date2 = new Date(end.format('YYYY-MM-DD'));
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1); 
$('.duration_days').html(diffDays+' Days');
    //console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

Расчет длительности, когда я нажимаю кнопку «Применить», но я хочу, чтобы она вычислялась при выборе даты окончания. Пожалуйста, проверьте прикрепленные скриншоты: Снимок экрана Снимок экрана 2

1 Ответ

0 голосов
/ 22 марта 2019

Как объяснил Шри Тивари в комментариях, вы можете использовать событие apply.daterangepicker .

apply.daterangepicker: срабатывает при нажатии кнопки «Применить», или при нажатии на предварительно заданный диапазон

Итак, ваш окончательный код js выглядит так: 

 
 $(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left',
  }, function(start, end, label) {
     document.getElementById('departure_date').value = start.format('YYYY-MM-DD');
     document.getElementById('return_date').value = end.format('YYYY-MM-DD');
  });
  $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) { 
      var date1 = new Date(start.format('YYYY-MM-DD'));
      var date2 = new Date(end.format('YYYY-MM-DD'));
      var timeDiff = Math.abs(date2.getTime() - date1.getTime()); 
      var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 1);                                     
      $('.duration_days').html(diffDays+' Days');
 });
});
...