Add Hours In 12 Hour Format Using Javascript / Jquery

How we can add hours into 12hour format time using Javascript/JQuery? Example: Add 2 hour in 12:00 AM then result should be 02:00 AM Add 8 hour in 09:00 PM then result should be 0

Solution 1:

The following function takes a string representing a time and an integer denoting the number of hours you want to add to that time. You can optionally pass an integer number of minutes as well. The result is a string formatted as 'h:mm xm'.

function addTimeToString(timeString, addHours, addMinutes) {
  // The third argument is optional.
  if (addMinutes === undefined) {
    addMinutes = 0;
  }
  // Parse the time string. Extract hours, minutes, and am/pm.
  var match = /(\d+):(\d+)\s+(\w+)/.exec(timeString),
      hours = parseInt(match[1], 10) % 12,
      minutes = parseInt(match[2], 10),
      modifier = match[3].toLowerCase();
  // Convert the given time into minutes. Add the desired amount.
  if (modifier[0] == 'p') {
    hours += 12;
  }
  var newMinutes = (hours + addHours) * 60 + minutes + addMinutes,
      newHours = Math.floor(newMinutes / 60) % 24;
  // Now figure out the components of the new date string.
  newMinutes %= 60;
  var newModifier = (newHours < 12 ? 'AM' : 'PM'),
      hours12 = (newHours < 12 ? newHours : newHours % 12);
  if (hours12 == 0) {
    hours12 = 12;
  }
  // Glue it all together.
  var minuteString = (newMinutes >= 10 ? '' : '0') + newMinutes;
  return hours12 + ':' + minuteString + ' ' + newModifier;
}

function test(timeString, addHours, addMinutes) {
  document.write(timeString + ' + ' + addHours + ' h ' +
      (addMinutes || 0) + ' m &rarr; ' +
      addTimeToString(timeString, addHours, addMinutes) + '<br>');
}

test('11:30 AM', 1, 45);
test('9:00 PM', 4);
test('11:55 PM', 0, 5);  // In five minutes it will be midnight: 12 am.
test('12:00 AM', 0, 5);  // Five minutes after midnight: 12:05 am.
test('11:55 AM', 0, 5);  // In five minutes it will be noon: 12 pm.
test('12:00 PM', 0, 5);  // Five minutes after noon: 12:05 pm.

Solution 2:

function formatTime(date) {

    var meridiem = 'AM',
        hours;
    
    // Add the hours
    date.setHours(date.getHours() + 2);

    hours = date.getHours();

    if (hours >= 12) {
        meridiem = 'PM';
        hours = hours % 2;
    }
    
    hours = (hours === 0) ? 12 : hours;   
    
    return formatNumber(hours) + ':' + formatNumber(date.getMinutes()) + ' ' + meridiem;

}

function formatNumber(number) {
    return ('0' + number).slice(-2);
}

alert(formatTime(new Date()));

Solution 3:

I've added a couple of methods to the Date prototype class.

//Complete Solution

Date.createDateFromTime = function(hours, minutes) {
  var date = new Date();
  date.setTime(hours, minutes);

  return date;
}

Date.prototype.setTime = function(hours, minutes) {
  this.setHours(hours);
  this.setMinutes(minutes);

  return this.displayTime();
}

Date.prototype.displayTime = function() {
  function addZero(number) {
    if (number < 10) {
      return "0" + number.toString();
    } else {
      return number.toString();
    }
  }

  var hours = this.getHours();
  var minutes = this.getMinutes();
  var am_pm = "AM";

  if (hours >= 12) {
    am_pm = "PM"
    hours -= 12;
  }

  if (hours == 0) hours = 12;

  hours = addZero(hours);
  minutes = addZero(minutes);

  return hours + ":" + minutes + " " + am_pm;
}

Date.prototype.addHours = function(hours) {
  this.setHours(this.getHours() + hours);

  return this.getHours();
}

//Examples

date = Date.createDateFromTime(19, 20);
console.log(date.displayTime()); // "07:20 PM"
date.addHours(4);
console.log(date.displayTime()); // "11:20 PM"
date.addHours(5);
console.log(date.displayTime()); // "04:20 AM"