Calculate hours and minutes between 2 date and time

Question

Hopeing that someone can help me out here. I have a form where I need a user to input a start time and the end time of an incident. Once they have input the information they would manually enter the duration between the 2 date time. I am trying to automate this process with jquery and got an addon called moments http://momentjs.com/. I was hoping that it would make it simpler for me to calculate 2 date times but i gotta admit im not much of a savvy with jquery of javascript to understand how its suppose to come together.

On a side note as well I needed the duration field to be only calculated if its empty. I created a jsfiddle http://jsfiddle.net/FLhpq/2044/. This would be the closest i could get to replicate my scenario. Here is the code I had so far.

$(document).ready(function() {
    var start_time = $('input[title="start time"]').val();
    var end_time = $('input[title="End time"]').val();
    var d1 = moment(start_time, "YYYY-MM-DD HH:mm");
    var d2 = moment(end_time, "YYYY-MM-DD HH:mm");
    var duration = d2.diff(d1, 'hours')+1;
    var input = $('input[title="duration"]').val();
    if(input == ''){
         $('#duration').val('duration');
 });

Maybe the answer here will help? http://stackoverflow.com/questions/13903897/javascript-return-number-of-days-hours-minutes-seconds-between-two-dates (Possible duplicate?) — , Oct 02 '15 at 00:06
Possible duplicate of [Get time difference between two dates in seconds](http://stackoverflow.com/questions/13894632/get-time-difference-between-two-dates-in-seconds) — blurfus, Oct 02 '15 at 00:09

Jhey · Accepted Answer · 2015-10-02T00:53:05.897

You have the calculation right I believe. I think it's just the visual execution.

I put together the following fiddle for what I think you're trying to do; jsfiddle.net/....

    $(document).ready(function() {
      var start_time = $('.start').val(),
        end_time = $('.end').val(),
        d1 = moment(start_time, "YYYY-MM-DD HH:mm"),
        d2 = moment(end_time, "YYYY-MM-DD HH:mm"),
        duration = d2.diff(d1, 'hours') + 1,
        $input = $('.duration');
      if ($input.val() === ''){
        $input.val(duration);
      }
   });

In your original fiddle. There was no element with ID "duration". Also for grabbing elements, try class names for selectors instead. I added some simple classes to the inputs to make grabbing them with jQuery a little easier.

From here on, if you want to also additionally display minutes/seconds you can alter your duration logic by using some of momentjs' built in functionality such as to.

I believe something like the following;

duration = d1.to(d2) // RETURNS MOMENT

Hope this helps you out!

you could also humanize the input value: `$input.val(moment.duration(duration, 'hours').humanize());` — Jörn, Oct 02 '15 at 00:21
Yeah for sure. Not trying to enhance the implementation for OP. Just give pointers on tying up to UI ;) — Jhey, Oct 02 '15 at 00:23

Alvaro Silvino · Answer 2 · 2015-10-02T00:19:41.253

0

You should take a look at this

         var a = moment([2007, 0, 28]);
         var b = moment([2007, 0, 29]);
         a.to(b);                     // "in a day"

Or

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

edited Oct 02 '15 at 00:19

answered Oct 02 '15 at 00:13

Alvaro Silvino

9,441
12
52
80

Kyle Anderson · Answer 3 · 2015-10-02T01:00:25.527

This will display the hours (and minutes) and display it if the duration field is empty:

$(document).ready(function() {
    if($('#duration').val() === '') {
        updateDuration($('#start_time').val(), $('#end_time').val());
    }

    $('#start_time').on('change keyup', function() {
        updateDuration($('#start_time').val(), $('#end_time').val());
    });

    $('#end_time').on('change keyup', function() {
        updateDuration($('#start_time').val(), $('#end_time').val());
    });

    function updateDuration(startTime, endTime) {
        var ms = moment(endTime, 'YYYY/MM/DD HH:mm:ss').diff(moment(startTime, 'YYYY/MM/DD HH:mm:ss')),
            dt = moment.duration(ms),
            h  = Math.floor(dt.asHours()),
            m  = moment.utc(ms).format('mm');

        $('#duration').val(h + ' hours, ' + m + ' minutes');
    }
});

This also updates the duration input field if the user changes the value.

You can see a working JSFiddle here:

http://jsfiddle.net/divspace/9x0s01oy/

Calculate hours and minutes between 2 date and time

3 Answers3