Get difference between given date time and current date time

We have one date picker and one time picker. We want to compare these date and time with current date time. This is a big question for everyone how to compare two date and get difference.
We need some js and CSS file to include. All are available here :- CSS, font and JS file

Include following CSS in head

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

Include following JS in head

<script src='js/jquery.min.js'></script>
<script src="js/moment.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>

HTML for create date picker and time picker (Design is not good but i thing it's under-stable for all)

<div class="row">
 <div class="col-sm-1" style="text-align:right;"><label class="form_label">Date</label></div>
 <div class="col-sm-2">
  <input type='text'  id="selectDate" class="form-control" readonly="readonly" placeholder="DD/MM/YYYY" />
 </div>
 <div class="col-sm-1" style="text-align:right;"><label class="form_label">Time</label></div>
 <div class="col-sm-2">
  <input type='text'  id="selectTime" class="form-control" readonly="readonly" placeholder="HH:MM AM/PM" />
 </div>
 <div class="col-sm-1">
  <input type="button" id="compare" value="compare" />
 </div>
 <div class="col-sm-5">
  <span id="printDiff"></span>
 </div>
</div>

JS Code for show date picker and time picker

$(document).ready(function(){
 $(function() {
  $('#selectDate').datetimepicker({
   format: 'DD/MM/YYYY',
   ignoreReadonly: true
  }).on('dp.show dp.update', function () {
   $(".datepicker-years .picker-switch").removeAttr('title')
    .on('click', function (e) {
    e.stopPropagation();
   });
  });
  $('#selectTime').datetimepicker({
   format: 'LT',
   ignoreReadonly: true
  }).on('dp.show dp.update', function () {
   $(".datepicker-years .picker-switch").removeAttr('title')
    .on('click', function (e) {
    e.stopPropagation();
   });
  });
 });

JS Code for compare date and time

 $('#compare').on('click',function(){
  var dateForCompare = $('#selectDate').val();
  var timeForCompare = $('#selectTime').val();
  var selectHour = 0;
  var selectMinutes = 0;
  var finalDateTimeForCompare = '';
  if(timeForCompare != ''){
   var startDateCheck = timeForCompare.split(':');
   if(startDateCheck.length != 2){
    $('#printDiff').text('Invalid start time format');
    return false;
   }else if(startDateCheck.length == 2){
    var m  = startDateCheck[1], h = startDateCheck[0];
    var m1 = m.substring(0,2);
    var dateType = m.replace(m1,'');
    if(dateType == 'PM'){
     h = h + 12;
    }
    if(h > 24 || m1 > 59 ){
     $('#printDiff').text('Invalid start time format');
     return false;
    }else{
     selectHour = h;
     selectMinutes = m1;
    }
   }
  }
  if(dateForCompare != ''){
   var startDateCheck = dateForCompare.split('/');
   if(startDateCheck.length != 3){
    $('#printDiff').text('Invalid start date format');
    return false;
   }else if(startDateCheck.length == 3){
    var y = startDateCheck[2], m  = startDateCheck[1], d = startDateCheck[0];
    var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
    if ( (!(y % 4) && y % 100) || !(y % 400)) {
     daysInMonth[1] = 29;
    }
    if(y < 1000 || y > 9999 || m > 12 || m < 1|| d > daysInMonth[--m] || d < 1){
     $('#printDiff').text('Invalid start date format');
     return false;
    }else{
     var currentTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
     finalDateTimeForCompare = moment(new Date(y,m,d,selectHour,selectMinutes,0)).format("YYYY-MM-DD HH:mm:ss");
     finalDateTimeForCompare = moment(finalDateTimeForCompare);
     var difference = (finalDateTimeForCompare.diff(currentTime))/60000;
     $('#printDiff').text('Difference is '+difference+'Min');
    }
   }
  }
 });
});

Demo snapshot

Select future date and time

Select past date and time

If this post helpful for you please share and give your suggestion.