3
\$\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\$
  • 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 Pantry Feb 25 '16 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 Feb 25 '16 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 Pantry Feb 25 '16 at 16:46
  • \$\begingroup\$ No worries, I shall look up your suggestion! \$\endgroup\$ – Adam Copley Feb 25 '16 at 16:51
15
\$\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\$
8
\$\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\$
  • 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 '16 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\$
  • \$\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 Feb 25 '16 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 '16 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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