时间戳

首页 > 解决方案 > 计算持续时间并在 daterangepicker 日历中显示

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

问题描述

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

我使用的日历来自：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

标签： javascriptjquerydatepickerdaterangepicker

解决方案

正如 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');
 });
});

推荐阅读