How to convert minutes to hours/minutes and add various time values together using jQuery?

There are a couple parts to this question. I am not opposed to using a jQuery plugin if anyone knows of one that will accomplish what I want done.

Q1 – How do I convert minutes into hours and vise versa? For example how would I convert 90 minutes into 1 hour and 30 minutes. In the code below how would I get “totalMin” converted and displayed in “convertedHour” and “convertedMin”?

HTML:

<span class="totalMin">90</span> Minutes

<span class="convertedHour">0</span> Hours
<span class="convertedMin">0</span> Minutes

jsFiddle: http://jsfiddle.net/ExFBD

Q2 – How would I add up a group of time slots? For example, How would I add 1 hour 30 mins, 2 hours 45 mins and 2 hour 15 mins together?

HTML:

<span class="hour-1 hour">1</span> hour
<span class="min-1 min">30</span> min

<span class="hour-2 hour">2</span> hour
<span class="min-2 min">45</span> min

<span class="hour-3 hour">2</span> hour
<span class="min-3 min">15</span> min


<span class="totalHour">0</span> hour
<span class="totalMin">0</span> min

jsFiddle: http://jsfiddle.net/DX9YA/

Q3 – How would I take a time value (3 hours and 30 mins) and add it to a real time stamp such as 10:30 AM? How would I take AM vs PM into account?

33 thoughts on “How to convert minutes to hours/minutes and add various time values together using jQuery?”

  1. Q1:

    $(document).ready(function() {
        var totalMinutes = $('.totalMin').html();
    
        var hours = Math.floor(totalMinutes / 60);          
        var minutes = totalMinutes % 60;
    
        $('.convertedHour').html(hours);
        $('.convertedMin').html(minutes);    
    });
    

    Q2:

    $(document).ready(function() {
    
        var minutes = 0;
    
        $('.min').each(function() {
            minutes = parseInt($(this).html()) + minutes;
        });
    
        var realmin = minutes % 60
        var hours = Math.floor(minutes / 60)
    
        $('.hour').each(function() {
            hours = parseInt($(this).html()) + hours;
        });
    
    
        $('.totalHour').html(hours);
        $('.totalMin').html(realmin);    
    
    });
    
    Reply
  2. The function below will take as input # of minutes and output time in the following format: Hours:minutes.
    I used Math.trunc(), which is a new method added in 2015. It returns the integral part of a number by removing any fractional digits.

    function display(a){
      var hours = Math.trunc(a/60);
      var minutes = a % 60;
      console.log(hours +":"+ minutes);
    }
    
    display(120); //"2:0"
    display(60); //"1:0:
    display(100); //"1:40"
    display(126); //"2:6"
    display(45); //"0:45"
    
    Reply
  3. In case you want to return a string in 00:00 format…

    convertMinsToHrsMins: function (minutes) {
      var h = Math.floor(minutes / 60);
      var m = minutes % 60;
      h = h < 10 ? '0' + h : h;
      m = m < 10 ? '0' + m : m;
      return h + ':' + m;
    }
    

    Thanks for the up-votes. Here’s a slightly tidier ES6 version 🙂

    const convertMinsToHrsMins = (mins) => {
      let h = Math.floor(mins / 60);
      let m = mins % 60;
      h = h < 10 ? '0' + h : h;
      m = m < 10 ? '0' + m : m;
      return `${h}:${m}`;
    }
    
    Reply
  4. var timeConvert = function(n){
     var minutes = n%60
     var hours = (n - minutes) / 60
     console.log(hours + ":" + minutes)
    }
    timeConvert(65)
    

    this will log 1:5 to the console. It is a short and simple solution that should be easy to understand and no jquery plugin is necessary…

    Reply
  5. Alternated to support older browsers.

    function minutesToHHMM (mins, twentyFour) {
      var h = Math.floor(mins / 60);
      var m = mins % 60;
      m = m < 10 ? '0' + m : m;
    
      if (twentyFour === 'EU') {
        h = h < 10 ? '0' + h : h;
        return h+':'+m;
      } else {
        var a = 'am';
        if (h >= 12) a = 'pm';
        if (h > 12) h = h - 12;
        return h+':'+m+a;
      }
    }
    
    Reply
  6. As the above answer of ConnorLuddy can be slightly improved, there are a minor change to formula to convert minutes to hours:mins format

    const convertMinsToHrsMins = (mins) => {
      let h = Math.floor(mins / 60);
      let m = Math.round(mins % 60);
      h = (h < 10) ? ('0' + h) : (h);
      m = (m < 10) ? ('0' + m) : (m);
      return `${h}:${m}`;
    }
    

    My theory is that we can not predict that `mins` value will always be an integer.
    The added `Math.round` to function will correct the output.
    For example: when the minutes=125.3245, the output will be 02:05 with this fix, and 02:05.3245000000000005 without the fix.

    Hope that someone need this!

    Reply
  7. This code can be used with timezone

    javascript:

    let minToHm = (m) => {
      let h = Math.floor(m / 60);
      h += (h < 0) ? 1 : 0;
      let m2 = Math.abs(m % 60);
      m2 = (m2 < 10) ? '0' + m2 : m2;
      return (h < 0 ? '' : '+') + h + ':' + m2;
    }
    
    console.log(minToHm(210)) // "+3:30"
    console.log(minToHm(-210)) // "-3:30"
    console.log(minToHm(0)) // "+0:00"
    minToHm(210)
    "+3:30"
    
    minToHm(-210)
    "-3:30"
    
    minToHm(0)
    "+0:00"
    
    Reply
  8. I took the liberty of modifying ConorLuddy’s answer to address both 24 hour time and 12 hour time.

    function minutesToHHMM (mins, twentyFour = false) {
      let h = Math.floor(mins / 60);
      let m = mins % 60;
      m = m < 10 ? '0' + m : m;
    
      if (twentyFour) {
        h = h < 10 ? '0' + h : h;
        return `${h}:${m}`;
      } else {
        let a = 'am';
        if (h >= 12) a = 'pm';
        if (h > 12) h = h - 12;
        return `${h}:${m} ${a}`;
      }
    }
    
    Reply
  9. 👍 Very short code for transferring minutes in two formats!

    let format1 = (n) => `${n / 60 ^ 0}:` + n % 60
    
    console.log(format1(135)) // "2:15"
    console.log(format1(55)) // "0:55"
    
    let format2 = (n) => `0${n / 60 ^ 0}`.slice(-2) + ':' + ('0' + n % 60).slice(-2)
    
    console.log(format2(135)) // "02:15"
    console.log(format2(5)) // "00:05"
    Reply

Leave a Comment