Question

我正在尝试计算日历上选定日期之间的持续时间，这很好，但是当我单击“应用”按钮而不是选择结束日期时。

我正在使用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'));
  });
});

按下“应用”按钮时的持续时间计算，但是我希望在选择结束日期时进行计算。请检查所附的屏幕截图： Screen Shot Screen Shot 2

Answer 1

如Shree Tiwari在评论中所述，您可以使用 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');
 });
});

计算持续时间并显示在daterangepicker日历中

1 个答案: