How to add one hour for "24 hours" Time format in javascript/jquery?

Question

I want to add one hour in 24 hours time format using Javascript or JQuery.

like

if 23:00 then it should be 00:00
if 11:00 then 12:00
if 13:00 then 14:00 if 09:00 then 10:00

for that I tried below code. That's perfectly works

    function increase24TimeByOne(timeStr) {
            var splitedTimeStr = timeStr.split(':');
            var hours = parseInt(splitedTimeStr[0]);
            var minutes = splitedTimeStr[1].substring(0, 2);
            var nextHours = (hours + 1);
          
            if(nextHours.toString().length == 1){
                nextHours = "0" + nextHours;
            }
            if(nextHours == 24){
                nextHours = "00"
            }
            return nextHours + ":" + minutes;
        }

but I want to know that code is better or not ?
Can anyone please suggest ?

Thanks in advance

Does this answer your question? [Adding hours to JavaScript Date object?](https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object) — vlreshet, Aug 04 '21 at 10:34
maths ... `var nextHours = (hours + 1) % 24;` or betterer ... `var nextHours = ((hours + 1) % 24).toString().padStart(2, '0');` ... bang! wrap the time AND add leading zero in one line of code — Bravo, Aug 04 '21 at 10:34
@VladReshetilo that answer is for a Date object - OP has a string. Maybe they could convert to a date object first, but seems overkill. — freedomn-m, Aug 04 '21 at 10:36
@Bravo betterer??? :) Would your comment be betterer as an upvotable answer? — freedomn-m, Aug 04 '21 at 10:36
@freedomn-m Date object is not overkill, it's the correct way for manipulating with date. Manual manipulation with seconds/hours/etc is a bad practice — vlreshet, Aug 04 '21 at 10:38
@VladReshetilo debatable (but not here) - but OP isn't manipulating a date - they only have the time, as a string. — freedomn-m, Aug 04 '21 at 10:38

Bravo · Accepted Answer · 2021-08-04T11:43:21.160

4

Using modulo maths add 1 modulo 24

i.e. (23 + 1) % 24 === 0

function increase24TimeByOne(timeStr) {
  var splitedTimeStr = timeStr.split(':');
  var hours = parseInt(splitedTimeStr[0]);
  var minutes = splitedTimeStr[1].substring(0, 2);
  var nextHours = (hours + 1) % 24;
  var nextMeridiem;
  if (nextHours.toString().length == 1) {
    nextHours = "0" + nextHours;
  }
  return nextHours + ":" + minutes;
}

console.log(increase24TimeByOne('23:45'))

You can do better, by converting to string AND padding (optionally) the '0' at the same time

using toString().padStart(2, '0') - i.e add '0' until the string is at least 2 in length

function increase24TimeByOne(timeStr) {
    var splitedTimeStr = timeStr.split(':');
    var hours = parseInt(splitedTimeStr[0]);
    var minutes = splitedTimeStr[1].substring(0, 2);
    var nextHours = ((hours + 1) % 24).toString().padStart(2, '0');
    return nextHours + ":" + minutes;
}
console.log(increase24TimeByOne('23:45'))

In my opinion, you can do this with even less code by using string templates

It may not be so readable though, but less code is better code (to a point)

function increase24TimeByOne(timeStr) {
    let [hours, minutes] = timeStr.split(':');
    return `${((+hours + 1) % 24).toString().padStart(2, '0')}:${minutes}`;
}
console.log(increase24TimeByOne('23:45'))

edited Aug 04 '21 at 11:43

answered Aug 04 '21 at 10:41

Bravo

6,022
1
10
15

@freedomn-m - don't worry, I'll make it Engllisher now :p – Bravo Aug 04 '21 at 10:44
@freedomn-m - I should've made the last code the "betterest" :p – Bravo Aug 04 '21 at 10:48
@Bravo Thank you for suggestion. Second one is better for me. Third one is not working because of "let". I have tried "var" but not worked Sorry I'm new in this so I don't know which keyword I need to use. Can you please inform me which keyword should I use instead of "let or var"? – M123 Aug 04 '21 at 11:22
@M123 - what javascript engine doesn't have let? internet explorer 7? – Bravo Aug 04 '21 at 11:33
@Bravo FireFox, Actually I have used this code in .jsp file so if I use "let" then give me error like "org.apache.el.parser.ParseException: Encountered " "+" "+ "" at line 1, column 5." and on let keyword give me error like "Syntax error on token "var", delete this token" – M123 Aug 04 '21 at 11:43
@M123 - I can assure you `firefox` can run the last code - I wonder if it's the typo where I forgot a space ... hang on ... added a space after `let` - maybe whatever is having the issue will be fine now - but, I confess, no idea what this `.jsp file` refers to - nothing to do with firefox browser – Bravo Aug 04 '21 at 11:44
@M123 does the snippet provided here work for you? – freedomn-m Aug 04 '21 at 11:48
Just use what works @M123 - no need to wonder why some random javascript engine doesn't work with modern code – Bravo Aug 04 '21 at 11:50
@Bravo I tried `let` with space but still getting same error so I think `.jsp file` can't take it. FYI we can use `.jsp file` for making web pages in Java. – M123 Aug 04 '21 at 11:52
@M123 oh, java ... god speed :p – Bravo Aug 04 '21 at 11:56
@Bravo Yeah second one. I have reduced second one like `function increase24TimeByOne1(timeStr) { var splitedTimeStr = timeStr.split(':'); var hours = parseInt(splitedTimeStr[0]); return ((hours + 1) % 24).toString().padStart(2, '0') + ":" + splitedTimeStr[1]; }` – M123 Aug 04 '21 at 11:59

How to add one hour for "24 hours" Time format in javascript/jquery?

1 Answers1