разница граф между двумя датами - DateTimePicker

Question

1. Выберите Select start date and hour
2. Затем>Select end date and hour

Я хочу, чтобы показать разницу между этими двумя датами и часами в Show Days difference here и Show Hours difference here

См следующий фрагмент кода для ссылка

$(function() { 
 
    // defualt script for datetimepicket 
 
    $('.startDateTime').datetimepicker({ 
 
    
 
    //uncomment following code to enable debug mode 
 
    //debug: true 
 
    }); 
 
    $('.endDateTime').datetimepicker({ 
 
    
 
    //uncomment following code to enable debug mode 
 
    //debug: true, 
 
    
 
    useCurrent: false 
 
    }); 
 
    $(".startDateTime").on("dp.change", function(e) { 
 
    $('.endDateTime').data("DateTimePicker").minDate(e.date); 
 
    }); 
 
    $(".endDateTime").on("dp.change", function(e) { 
 
    $('.startDateTime').data("DateTimePicker").maxDate(e.date); 
 
    }); 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<div class="container"> 
 
    <div class="row date-pick"> 
 
    <div class="col-md-12"> 
 
     <div class="well date-picker-box"> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control startDateTime" placeholder="Select start date and hour"> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control endDateTime" placeholder="Select End date and hour"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <input type="text" class="form-control days-here" placeholder="Show Days difference here"> 
 
    <input type="text" class="form-control time-here" placeholder="Show Hours difference here"> 
 
</div>

Answer 1

Demo

JS

function CalcDiff() { 
    var a = $('.startDateTime').data("DateTimePicker").date(); 
    var b = $('.endDateTime').data("DateTimePicker").date(); 
    var timeDiff = 0 
    if (b) { 
     timeDiff = (b - a)/1000; 
    } 
    var DateDiff = Math.floor(timeDiff/(60 * 60 * 24)); 
    var BalSecs = timeDiff - (DateDiff * (60 * 60 * 24)); 
    $('.days-here').val(DateDiff) 
    $('.time-here').val(Math.ceil(BalSecs/(60 * 60))) 
} 

Вызов выше функции на dp.change

$(".endDateTime").on("dp.change", function (e) { 
    $('.startDateTime').data("DateTimePicker").maxDate(e.date); 
    CalcDiff() 
}); 

После расчета дней вы должны вычислить часов, так что логика

var DateDiff = Math.floor(timeDiff/(60 * 60 * 24)); 
    var BalSecs = timeDiff - (DateDiff * (60 * 60 * 24)); 

Answer 2

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

в течение одной минуты 60 * 1000 за один час 60 * 60 * 1000 за один день 24 * 60 * 60 * 1000

делят по этой конкретной и получить работу.

Answer 3

вы должны попробовать использовать библиотеки JavaScript с именем moment.js ->http://momentjs.com/docs/#/displaying/difference/ пример:

var a = moment([2007, 0, 29]); 
var b = moment([2007, 0, 28]); 
a.diff(b, 'days') // 1