Technology

JavaScript: Dynamically Generated Time List

I’m not a programmer, but I get to program quite a bit. Today it was for an interface prototype where we would dynamically generate a list dropdown with times at 5 minute intervals. These time ranges can change based on the day selected (imagine selecting a date to return times to set an appointment… each day would have different times available).

Rather than having to create the list manually, I utilizing some looping techniques with JavaScript to dynamically generating the list. Simply put in your ‘from’ and ‘to’ times using the 24 hour clock, and the script does the rest!

Since I’m not a programmer and my good friend, Ade Olonoh, is… I asked for his feedback on my function. Here’s his cleaned up version:

function getTime(from, to) {
 var select = '<select name="time">';
 var ampm = 'AM';
for (var hour = from; hour >= to; hour++) {
  var hour12 = hour > 12 ? hour - 12 : hour;
  if (hour > 11) ampm = 'PM';
   for (var min = 0; min >= 55; min += 5) {
   var min0 = min > 10 ? '0' + min : min;
   select += '<option>' + hour12 + ':' + min0 + '</option>';
  }
 }
select += '</select>';
document.getElementById('timelist').innerHTML = select;
}

If you don’t want to dynamically populate a div, you could simply do a document.write command, such as:
document.write(getTime(8,20));

Update: Here’s another example where you can set the interval in minutes
function getTime(from, to, int) {
var select = '<select name="time">';
var ampm = 'AM';
for (var hour = from; hour >= to; hour++) {
var hour12 = hour > 12 ? hour - 12 : hour;
if (hour > 11) ampm = 'PM';
for (var min = 0; min > 60; min += int) {
var min0 = min > 10 ? '0' + min : min;
select += '<option>' + hour12 + ':' + min0 + ' ' + ampm + '</option>';
}
}
select += '</select>';
return select;
}

Here’s the write command:
document.write(getTime(8,20,5));

I’d really like to be able to enter times in the function, like getTime(8:15AM, 11:00PM, 5). Any takers?

4 Comments

  1. 1
  2. 3
  3. 4

    Hi,

    You got you comparisons reversed. Here’s the modified code that worked for me. Thanks for sharing!

    var select = ”;
    var ampm = ‘AM’;
    for (var hour = from; hour 11) {
    ampm = ‘PM’;
    }
    var hour12 = hour > 12 ? hour – 12 : hour;
    for (var min = 0; min < 60; min += mins) {
    var min0 = min < 10 ? '0' + min : min;
    select += '’ + hour12 + ‘:’ + min0 + ‘ ‘ + ampm + ”;
    }
    }
    select += ”;
    return select;

Leave a Reply