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? — vlreshet
– vlreshet, Commented Aug 4, 2021 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
– Bravo, Commented Aug 4, 2021 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. — fdomn-m
– fdomn-m, Commented Aug 4, 2021 at 10:36
@VladReshetilo debatable (but not here) - but OP isn't manipulating a date - they only have the time, as a string. — fdomn-m
– fdomn-m, Commented Aug 4, 2021 at 10:38

Bravo · Accepted Answer · 2021-08-04 11:43:21Z

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 4, 2021 at 11:43

answered Aug 4, 2021 at 10:41

Bravo

6,3271 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Bravo Over a year ago

@freedomn-m - don't worry, I'll make it Engllisher now :p

Bravo Over a year ago

@freedomn-m - I should've made the last code the "betterest" :p

M123 Over a year ago

@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"?

Bravo Over a year ago

@M123 - what javascript engine doesn't have let? internet explorer 7?

M123 Over a year ago

@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"

|

Collectives™ on Stack Overflow

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

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related