[javascript] 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?

This question is related to javascript jquery time

The answer is


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...


Very short code for transferring minutes in two formats!

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


Not a jquery plugin, but the DateJS Library appears to do what you require. The Getting Started page has a number of examples.


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}`;
}

This code can be used with timezone

javascript:

_x000D_
_x000D_
let minToHm = (m) => {_x000D_
  let h = Math.floor(m / 60);_x000D_
  h += (h < 0) ? 1 : 0;_x000D_
  let m2 = Math.abs(m % 60);_x000D_
  m2 = (m2 < 10) ? '0' + m2 : m2;_x000D_
  return (h < 0 ? '' : '+') + h + ':' + m2;_x000D_
}_x000D_
_x000D_
console.log(minToHm(210)) // "+3:30"_x000D_
console.log(minToHm(-210)) // "-3:30"_x000D_
console.log(minToHm(0)) // "+0:00"
_x000D_
_x000D_
_x000D_

minToHm(210)
"+3:30"

minToHm(-210)
"-3:30"

minToHm(0)
"+0:00"

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"

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

function parseMinutes(x) {
  hours = Math.floor(x / 60);
  minutes = x % 60;
}

function parseHours(H, M) {
  x = M + H * 60;
}

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!

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}`;
  }
}

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to time

Date to milliseconds and back to date in Swift How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime how to sort pandas dataframe from one column Convert time.Time to string How to get current time in python and break up into year, month, day, hour, minute? Xcode swift am/pm time to 24 hour format How to add/subtract time (hours, minutes, etc.) from a Pandas DataFrame.Index whos objects are of type datetime.time? What does this format means T00:00:00.000Z? How can I parse / create a date time stamp formatted with fractional seconds UTC timezone (ISO 8601, RFC 3339) in Swift? Extract time from moment js object