CODEWITHSUNDEEP
javascriptjquery
Daniel Ellison
Daniel Ellison

Reputation: 1347

Calculate hours and minutes between 2 date and time

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

Upvotes: 0

Views: 2751

Answers (3)

Kyle Anderson
Kyle Anderson

Reputation: 3229

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/

Upvotes: 0

Jhey
Jhey

Reputation: 1377

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!

Upvotes: 2

Alvaro Silvino
Alvaro Silvino

Reputation: 9763

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

Upvotes: 0

Related Questions