How to add options for 24 hours in 12 hour AM/PM format?

Question

How to display the below, using for loop in JavaScript?:

    <option value="00">00 AM</option>
    <option value="01">01 AM</option>
    <option value="02">02 AM</option> 
    .
    .
    .
    <option value="21">09 PM</option>
    <option value="22">10PM</option>
    <option value="23">11PM</option>

I have tried this so far:

for (var i = 0, j = 0; i < 12, j < 24; i++, j++) {
    console.log(this.addZero(i) + "AM");
    console.log(j);
    if (i > 11) {
        console.log()
    }
    $("#fromHour").append("<option value='" + this.addZero(i) + "'>" + this.addZero(i) + "AM</option>")
    $("#toHour").append("<option value='" + this.addZero(i) + "'>" + this.addZero(i) + "AM</option>");
}

After i is greater than 11 it should display PM and value should be incremented.

How to do that?

Answer 1

1. Start out with a variable, ampm , which has "AM" in it.

2. Remove the i < 12 from the for loop condition (the comma after it makes the for loop invalid).

3. At the top of the loop:

    if (i === 12) { ampm = "PM"; } else if (i > 12) { i -= 12; } 

Then use j for the part of the option value, rather than i , and use i and ampm for the display.

Answer 2

From your code, I'm guessing that this is what you are actually trying to do:

var tp = "AM";

for(var i = 0; i < 24; i++) {

    var t = i;

    if (i == 12) {
        tp = "PM";
    } else if (i > 12) {
        t -= 12;
    }

    console.log(this.addZero(t) + tp);

    $("#fromHour").append("<option value='"
        + this.addZero(i) + "'>" + this.addZero(t) + tp + "</option>");
    $("#toHour").append("<option value='"
        + this.addZero(i) + "'>" + this.addZero(t) + tp + "</option>");
}

It helps when you try to format your code to make it as readable as possible.

Answer 3

There are a couple of ways to do this. Here's a simple way with the code you started with.

var i = 0;
var dayHalf = "AM";
for(j=0;j<24;j++){
    i = j == 0 ? 12 : j > 12 ? j - 12 : j;
    dayHalf = j < 12 ? "AM" : "PM";

    console.log(this.addZero(i) + dayHalf);
    console.log(j);

    $("#fromHour").append("<option value='"+this.addZero(i)+"'>"+this.addZero(i) + dayHalf"</option>")
    $("#toHour").append("<option value='"+this.addZero(i)+"'>"+this.addZero(i) + dayHalf"</option>");
}

You don't really need the 'i' or 'dayHalf' variables, but I included them for clarity.

Answer 4

If you want to have a dropdown showing 01 AM, 02 AM...11 AM, 12 PM, 01 PM...11 PM, 12 AM you can do this similar to this:

// no idea what your addZero() looks like, I just poly-filled it for demo to work.
window.addZero = function(value){
    var pad = '00';

    return pad.substring(0, pad.length - value.toString().length) + value;
}

for (var i = 1; i < 25; i++) {
    var am = 'AM',
        pm = 'PM',
        ampm,
        timeUnit,
        timeValue,
        timeStamp;

    timeUnit = i > 12 ? i - 12 : i;
    ampm = i < 12 || i > 23 ? am : pm;

    timeValue = this.addZero(timeUnit);
    timeStamp = timeValue + ' ' + ampm;

    optionMarkup = "<option value='" + timeValue + "'>" + timeStamp + "</option>";


    $("#fromHour").append(optionMarkup);
    $("#toHour").append(optionMarkup);

    // if you want to have the last 12 AM to be at the top use the below and remove above append:
    //if(i === 24){
    //    $("#fromHour").prepend(optionMarkup);
    //    $("#toHour").prepend(optionMarkup);
    //} else{
    //    $("#fromHour").append(optionMarkup);
    //    $("#toHour").append(optionMarkup);
    //}
}

---

DEMO - Create time options for 24 hours using 12 hour format with AM/PM

---