Count difference between two dates - datetimepicker

Question

Select Select start date and hour
Then > Select end date and hour

I want to show the difference between these two dates and hours in Show Days difference here and Show Hours difference here

See following snippet for reference

$(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>

http://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript — flx, Aug 31 '15 at 08:21
@zeropublix It would be great if you modify my snippet, because I've followed the link and that is showing me error `Uncaught TypeError: Cannot read property 'getTime' of undefined` — Umar Mahmood, Aug 31 '15 at 08:33

score 1 · Answer 1 · answered Aug 31 '15 at 08:30

1

you should try using javascript library named moment.js -> http://momentjs.com/docs/#/displaying/difference/ example:

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

answered Aug 31 '15 at 08:30

Radu Toader

1,521
16
23

This would be my last step, until then I will avoid adding additional Library to my site, as there are already bunches of libraries. :) well thanks – Umar Mahmood Aug 31 '15 at 08:35
You will end up having trouble counting days between normal,and leap years, and this library will take this differences into consideration. – Radu Toader Aug 31 '15 at 08:37

J Santosh · Accepted Answer · 2015-08-31T09:45:28.370

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)))
}

Call above function on dp.change

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

After calculating days you have calculate the hours so the logic

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

score 0 · Answer 3 · answered Aug 31 '15 at 08:23

0

First of all you have to convert this date format from Date and hours to milliseconds for both the dates. Then find difference between milliseconds.

for one minute 60*1000 for one hours 60*60*1000 for one day 24*60*60*1000

divide by this particular and get work done.

answered Aug 31 '15 at 08:23

Vijay Shelke

77
1
4

Can you please edit my/current snippet? It would be best if you modify that. – Umar Mahmood Aug 31 '15 at 08:32

Count difference between two dates - datetimepicker

3 Answers3