Creating JavaScript Array of 24-Hour Time Values Beginning from Present Hour

Other Questions JavaScript
1

Hello everyone! I need help with creating a JavaScript array that contains all 24 hours of the day, but I want the array to begin from whatever the current hour is right now.

Here’s what I’m looking for:

Let’s say it’s currently 2:00 PM. I want my array to look like this:

['1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300', '0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300']

Rather than getting the standard order:

['0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300']

Basically, I want the current hour to be the first element, and then continue through the remaining hours in chronological order. Any ideas on how to achieve this?

2

I’ve dealt with this exact scenario when working on a time-based booking system. The approach I found most reliable involves creating the full array first, then slicing it at the current hour position.

function createTimeArrayFromNow() {
    const now = new Date();
    const currentHour = now.getHours();
    
    // Generate all 24 hours in standard format
    const allHours = Array.from({length: 24}, (_, i) => 
        i.toString().padStart(2, '0') + '00'
    );
    
    // Split at current hour and rearrange
    return [...allHours.slice(currentHour), ...allHours.slice(0, currentHour)];
}

The benefit of this method is that it’s more readable and easier to debug when something goes wrong. I initially tried the modulo approach but found myself making mistakes with the arithmetic during late-night coding sessions. This slice-and-concat method is more straightforward and less prone to off-by-one errors.

3

I ran into a similar requirement last year when building a scheduling interface. The trick is to use the modulo operator to wrap the hours around properly.

Here’s what worked for me:

function getHoursFromCurrent() {
    const currentHour = new Date().getHours();
    const hours = [];
    
    for (let i = 0; i < 24; i++) {
        const hour = (currentHour + i) % 24;
        hours.push(hour.toString().padStart(4, '0').slice(0, 2) + '00');
    }
    
    return hours;
}

The key insight is using (currentHour + i) % 24 to cycle through all hours starting from the current one. When you reach hour 23 and add 1, the modulo operation brings you back to 0. The padStart() ensures you always get the proper zero-padding for single digit hours.

I found this approach much cleaner than trying to slice and concatenate arrays, and it handles the midnight rollover automatically without any special cases.

4

honestly just grab current hour with new Date().getHours() then loop 24 times adding to that hour, use modulo to wrap around. somthing like (startHour + i) % 24 should do the trick. format with padStart if you need leading zeros for single digits.