4
\$\begingroup\$

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"
                ];
\$\endgroup\$
4
  • 2
    \$\begingroup\$ 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. \$\endgroup\$
    – Dan
    Feb 25, 2016 at 11:22
  • \$\begingroup\$ To populate a <select> with options in a jQuery ui modal. Can you elaborate on momentjs perhaps with an answer. \$\endgroup\$ Feb 25, 2016 at 16:45
  • \$\begingroup\$ 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. \$\endgroup\$
    – Dan
    Feb 25, 2016 at 16:46
  • \$\begingroup\$ No worries, I shall look up your suggestion! \$\endgroup\$ Feb 25, 2016 at 16:51

4 Answers 4

18
\$\begingroup\$
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.

\$\endgroup\$
5
  • \$\begingroup\$ It'll not work properly in days when sunlight saving hour switch happens. \$\endgroup\$ Nov 11, 2019 at 22:42
  • \$\begingroup\$ @pie6k seems irrelevant, because we're just making a list of times \$\endgroup\$
    – Pimgd
    Nov 14, 2019 at 9:33
  • \$\begingroup\$ there are some days where you'll have 3am happening twice in the same day. As for countries where the timezone is switching during winter/summer clock is 'going back' 1 hour at a specific time (usually during the night). Eg. if you'd pick 3am on Oct 27 2019 in Poland, it'd be ambiguous as it could mean 2 possible results. \$\endgroup\$ Nov 14, 2019 at 15:29
  • \$\begingroup\$ Using var time = i + ":" + (j * 15) can save you one more line. \$\endgroup\$
    – Philzen
    Jul 5, 2022 at 2:31
  • \$\begingroup\$ @Philzen leads to '1:0', '1:15' \$\endgroup\$
    – Pimgd
    Jul 5, 2022 at 13:13
9
\$\begingroup\$

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] );
  }
}
\$\endgroup\$
1
  • 2
    \$\begingroup\$ You could get rid of the comment by making it a local store: var twoDigitHour = ('0' + i).slice(-2); \$\endgroup\$
    – Pimgd
    Feb 25, 2016 at 16:54
3
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ 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! \$\endgroup\$ Feb 25, 2016 at 17:32
  • \$\begingroup\$ @AdamCopley I would agree with that statement. That page was literally the first result for me in Google for Jquery UI timepicker. \$\endgroup\$
    – Nzall
    Feb 25, 2016 at 17:34
0
\$\begingroup\$

For anyone who looks for a simple solution that you can even edit the minutes "steps", here is a script which uses moment library:

<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script>
  function timesList(start,end,minutes_step){
  let dateStart = moment(`2017-08-30T${start}:00`);
  let dateEnd = moment(`2017-08-30T${end}:00`).subtract(minutes_step, 'minutes');
  let times = [];
  times.push(dateStart.format("HH:mm"));

  while (times[times.length - 1] < dateEnd.format("HH:mm")){
    times.push(dateStart.add(minutes_step, 'minutes').format("HH:mm"));
  }
  console.log(times)
};
timesList("00:00","24:00",15)
</script>

times :

["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"]
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.