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
    Commented 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\$
    – Adam Copley
    Commented 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
    Commented Feb 25, 2016 at 16:46
  • \$\begingroup\$ No worries, I shall look up your suggestion! \$\endgroup\$
    – Adam Copley
    Commented Feb 25, 2016 at 16:51

4 Answers 4

Reset to default
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\$
    – Adam Pietrasiak
    Commented Nov 11, 2019 at 22:42
  • \$\begingroup\$ @pie6k seems irrelevant, because we're just making a list of times \$\endgroup\$
    – Pimgd
    Commented 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\$
    – Adam Pietrasiak
    Commented Nov 14, 2019 at 15:29
  • \$\begingroup\$ Using var time = i + ":" + (j * 15) can save you one more line. \$\endgroup\$
    – Philzen
    Commented Jul 5, 2022 at 2:31
  • \$\begingroup\$ @Philzen leads to '1:0', '1:15' \$\endgroup\$
    – Pimgd
    Commented 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
    Commented 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\$
    – Adam Copley
    Commented 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
    Commented 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\$

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