Add hours to a Date object with only time and AM/PM displayed?-CodePudding

How to add hours to a Date object?

This was a clock ONLY that is 1 hour ahead. Can be customized to whatever amount of hours you need.

This works in all time zones.

If you want to add more hours just change the output for each hour 0-23

```
 <script type="text/javascript">
window.onload = function () {
    DisplayCurrentTime();
};
function DisplayCurrentTime() {
    var date = new Date();
    var a = date.getHours() == 0 ? "1" : "" ;
    var b = date.getHours() == 1 ? "2" : "" ;
    var c = date.getHours() == 2 ? "3" : "" ;
    var d = date.getHours() == 3 ? "4" : "" ;
    var e = date.getHours() == 4 ? "5" : "" ;
    var f = date.getHours() == 5 ? "6" : "" ;
    var g = date.getHours() == 6 ? "7" : "" ;
    var h = date.getHours() == 7 ? "8" : "" ;
    var i = date.getHours() == 8 ? "9" : "" ;
    var j = date.getHours() == 9 ? "10" : "" ;
    var k = date.getHours() == 10 ? "11" : "" ;
    var l = date.getHours() == 11 ? "12" : "" ;
    var m = date.getHours() == 12 ? "1" : "" ;
    var n = date.getHours() == 13 ? "2" : "" ;
    var o = date.getHours() == 14 ? "3" : "" ;
    var p = date.getHours() == 15 ? "4" : "" ;
    var q = date.getHours() == 16 ? "5" : "" ;
    var r = date.getHours() == 17 ? "6" : "" ;
    var s = date.getHours() == 18 ? "7" : "" ;
    var t = date.getHours() == 19 ? "8" : "" ;
    var u = date.getHours() == 20 ? "9" : "" ;
    var v = date.getHours() == 21 ? "10" : "" ;
    var w = date.getHours() == 22 ? "11" : "" ;
    var x = date.getHours() == 23 ? "12" : "" ;

    var am = date.getHours() <= 10 ? "AM" : "";
    var pm = date.getHours() == 11 ? "PM" : "";
  var pma = date.getHours() == 12 ? "PM" : "";
  var pmb = date.getHours() == 13 ? "PM" : "";
  var pmc = date.getHours() == 14 ? "PM" : "";
  var pmd = date.getHours() == 15 ? "PM" : "";
  var pme = date.getHours() == 16 ? "PM" : "";
  var pmf = date.getHours() == 17 ? "PM" : "";
  var pmg = date.getHours() == 18 ? "PM" : "";
  var pmh = date.getHours() == 19 ? "PM" : "";
  var pmi = date.getHours() == 20 ? "PM" : "";
  var pmj = date.getHours() == 21 ? "PM" : "";
  var pmk = date.getHours() == 22 ? "PM" : "";
  var ama = date.getHours() == 23 ? "AM" : "";

  var minutes = date.getMinutes() < 10 ? "0"   date.getMinutes() : date.getMinutes();


  
    time = a   b   c   d   e   f   g   h   i   j   k   l   m   n   o   p   q   r   s   t   u   v   w   x   ":"   minutes   " "   am   pm   pma   pmb   pmc   pmd   pme   pmf   pmg   pmh   pmi   pmj   pmk   ama;
    var lblTime = document.getElementById("lblTime");
    lblTime.innerHTML = time;
};

One hour from now is: < span id='lblTime'>

CodePudding user response：

why your logic very complicated. its a simple code bro.

var datetime = new Date();
const timeFormat = { hour: '2-digit', minute: '2-digit'}
console.log("Before: ", datetime.toLocaleTimeString('en-US', timeFormat));

//ADD n Hour
datetime.setHours(datetime.getHours() 1); 
console.log("After: ", datetime.toLocaleTimeString('en-US', timeFormat));

result
Before: 09:00 PM
After: 10:00 PM

CodePudding user response：

you can use combine multiple function for that

like this

const addHours = (date, hours) => 
 new Date(date.getTime()   3600 *1000 * hours)

const formatDate = date => {
  const hour = date.getHours()
  const minutes = date.getMinutes()
  const isAm = hour < 13
  return `${(isAm? hour: hour - 12).toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${isAm? 'AM': 'PM'}`
}

const addHourAndFormat = (date, hours) => formatDate(addHours(date, hours))

const date1 = new Date('2022-11-15 14:54:00')
const date2 = addHours(date1, 5)

console.log(formatDate(date1))
console.log(formatDate(date2))

console.log(addHourAndFormat(date1, 13))

CodePudding user response：

There are a number of libraries that can accomplish this for you. date-fns is one. For instance, the function https://date-fns.org/v2.29.3/docs/intlFormat. JavaScript Dates have a number of issues and aren't super easy to work with. There is a new api in the works to deal with many of these issues.

For a relatively simplistic implementation for adding an hour to a date, this should do the trick:

As described on MDN:

Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

The valueOf function will return the millisecond representation of the Date object. Add to that the number of milliseconds you are interested(in this case 60(minutes in hour) * 60(seconds in minute) * 1000(milliseconds in second)) in and then pass that number to the date constructor.

const date = new Date(Date.now());
const hourInMilliseconds = 60 * 60 * 1000;
const datePlusHour = new Date(date.valueOf()   hourInMilliseconds);

const dateHour = datePlusHour.getHours();
const amPmString = Math.floor(dateHour / 12) > 0 ? 'PM' : 'AM';
let dateHourString;
if (dateHour === 0) {
  dateHourString = '12';
} else {
  const twelveHour = dateHour % 12;
  dateHourString = (twelveHour < 10 ? '0' : '')   twelveHour;
}

const dateMinuteString = (datePlusHour.getMinutes() < 10 ? '0' : '')   datePlusHour.getMinutes();
console.log(date, datePlusHour);
console.log(`${dateHourString}:${dateMinuteString} ${amPmString}`);