# Creating an array with quarter hour times

There is no need for me to use 50 lines of code here, but how can I populate this array in a loop without using date/time methods.

var timeoptions = ["00:00", "00:15",
"00:30", "00:45",
"01:00", "01:15",
"01:30", "01:45",
"02:00", "02:15",
"02:30", "02:45",
"03:00", "03:15",
"03:30", "03:45",
"04:00", "04:15",
"04:30", "04:45",
"05:00", "05:15",
"05:30", "05:45",
"06:00", "06:15",
"06:30", "06:45",
"07:00", "07:15",
"07:30", "07:45",
"08:00", "08:15",
"08:30", "08:45",
"09:00", "09:15",
"09:30", "09:45",
"10:00", "10:15",
"10:30", "10:45",
"11:00", "11:15",
"11:30", "11:45",
"12:00", "12:15",
"12:30", "12:45",
"13:00", "13:15",
"13:30", "13:45",
"14:00", "14:15",
"14:30", "14:45",
"15:00", "15:15",
"15:30", "15:45",
"16:00", "16:15",
"16:30", "16:45",
"17:00", "17:15",
"17:30", "17:45",
"18:00", "18:15",
"18:30", "18:45",
"19:00", "19:15",
"19:30", "19:45",
"20:00", "20:15",
"20:30", "20:45",
"21:00", "21:15",
"21:30", "21:45",
"22:00", "22:15",
"22:30", "22:45",
"23:00", "23:15",
"23:30", "23:45"
];

-
I don't think you're needing this date time info in a vacuum. What else are you doing with these times? If you're using them for something else, it may be worth you doing something with momentjs. – Dan Pantry Feb 25 at 11:22
To populate a <select> with options in a jQuery ui modal. Can you elaborate on momentjs perhaps with an answer. – Adam Copley Feb 25 at 16:45
It's not really possible for me to give an answer based on the information I'm given, so it was just a friendly suggestion. – Dan Pantry Feb 25 at 16:46
No worries, I shall look up your suggestion! – Adam Copley Feb 25 at 16:51

var quarterHours = ["00", "15", "30", "45"];
var times = [];
for(var i = 0; i < 24; i++){
for(var j = 0; j < 4; j++){
times.push(i + ":" + quarterHours[j]);
}
}


That's the really quick way without thinking. There might be better ways, but this is what I come up with in 2 minutes.

After testing, you'll find out that it doesn't have a 0 prefix for hours 1 through 9. They show up as "9:45". You could either add a check for that, like so:

var quarterHours = ["00", "15", "30", "45"];
var times = [];
for(var i = 0; i < 24; i++){
for(var j = 0; j < 4; j++){
if(i < 10){
times.push("0" + i + ":" + quarterHours[j]);
} else {
times.push(i + ":" + quarterHours[j]);
}
}
}


Some more minor cleanup...

var quarterHours = ["00", "15", "30", "45"];
var times = [];
for(var i = 0; i < 24; i++){
for(var j = 0; j < 4; j++){
var time = i + ":" + quarterHours[j];
if(i < 10){
time = "0" + time;
}
times.push(time);
}
}


Or declare another array with "00", "01", "02"... "23".

Basically what you end up doing is creating every combination of hours and 15 minutes to recreate that big array of yours.

-

One could change the first suggested algorithm in the following way:

var quarterHours = ["00", "15", "30", "45"];

var times = [];
for(var i = 0; i < 24; i++){
for(var j = 0; j < 4; j++){
// Using slice() with negative index => You get always (the last) two digit numbers.
times.push( ('0' + i).slice(-2) + ":" + quarterHours[j] );
}
}

-
ooh, very clever. – Pimgd Feb 25 at 16:49
You could get rid of the comment by making it a local store: var twoDigitHour = ('0' + i).slice(-2); – Pimgd Feb 25 at 16:54

From your comments, I gather that you're using Jquery ui and trying to populate a timepicker.

Jquery, however, already has a ton of timepicker plugins. As always, I urge you to try and avoid to reinvent the wheel.

https://plugins.jquery.com/tag/timepicker/ is a set of all the timepicker plugins that work with Jquery. I will not pretend that I have tried any of them, so I'll just give you the link and invite you to make your own decision.

-
I guess I didn't dig deep enough, it seems like you don't have to do anything for the front end yourself these days! – Adam Copley Feb 25 at 17:32
@AdamCopley I would agree with that statement. That page was literally the first result for me in Google for Jquery UI timepicker. – Nzall Feb 25 at 17:34