Select List of Times (10-minute increments)

Posted: 2020-08-25 | Updated: 2020-09-02 | Read Time: 35 minute(s)

Background

I needed a select list of times that was done in 10 minute increments. Previously, I had used a Kendo time picker. This meant that the selection was able to be completed with about 7 lines of code. However, it was considered to be defective when the QA (quality assurance) testing was done because when you typed in a time, it would not select that time from the drop down list. The reason that it would not select the time when it was, manually keyed in, is because the Kendo date picker tag helper that was used, uses a input field for the job downs instead of using a select list, as you would think that it would use.

Using bash, I was able to create the list of options for the time increments that I needed instead of typing each one out manually.

As previously mentioned, the times had to be in 10 minute increments. I originally done the times for the 24-hour clock. However, I needed it for 12-hour clock, so I have created that option list as well.

24-hour clock

Bash Command

echo "<select>"
for h in {0..23}; do for m in {0..5}; do echo "<option value=\"$h:$m"0"\">$h:$m"0"</option>"; done; done
echo "</select>

Command Output

<select>
<option value="0:00">0:00</option>
<option value="0:10">0:10</option>
<option value="0:20">0:20</option>
<option value="0:30">0:30</option>
<option value="0:40">0:40</option>
<option value="0:50">0:50</option>
<option value="1:00">1:00</option>
<option value="1:10">1:10</option>
<option value="1:20">1:20</option>
<option value="1:30">1:30</option>
<option value="1:40">1:40</option>
<option value="1:50">1:50</option>
<option value="2:00">2:00</option>
<option value="2:10">2:10</option>
<option value="2:20">2:20</option>
<option value="2:30">2:30</option>
<option value="2:40">2:40</option>
<option value="2:50">2:50</option>
<option value="3:00">3:00</option>
<option value="3:10">3:10</option>
<option value="3:20">3:20</option>
<option value="3:30">3:30</option>
<option value="3:40">3:40</option>
<option value="3:50">3:50</option>
<option value="4:00">4:00</option>
<option value="4:10">4:10</option>
<option value="4:20">4:20</option>
<option value="4:30">4:30</option>
<option value="4:40">4:40</option>
<option value="4:50">4:50</option>
<option value="5:00">5:00</option>
<option value="5:10">5:10</option>
<option value="5:20">5:20</option>
<option value="5:30">5:30</option>
<option value="5:40">5:40</option>
<option value="5:50">5:50</option>
<option value="6:00">6:00</option>
<option value="6:10">6:10</option>
<option value="6:20">6:20</option>
<option value="6:30">6:30</option>
<option value="6:40">6:40</option>
<option value="6:50">6:50</option>
<option value="7:00">7:00</option>
<option value="7:10">7:10</option>
<option value="7:20">7:20</option>
<option value="7:30">7:30</option>
<option value="7:40">7:40</option>
<option value="7:50">7:50</option>
<option value="8:00">8:00</option>
<option value="8:10">8:10</option>
<option value="8:20">8:20</option>
<option value="8:30">8:30</option>
<option value="8:40">8:40</option>
<option value="8:50">8:50</option>
<option value="9:00">9:00</option>
<option value="9:10">9:10</option>
<option value="9:20">9:20</option>
<option value="9:30">9:30</option>
<option value="9:40">9:40</option>
<option value="9:50">9:50</option>
<option value="10:00">10:00</option>
<option value="10:10">10:10</option>
<option value="10:20">10:20</option>
<option value="10:30">10:30</option>
<option value="10:40">10:40</option>
<option value="10:50">10:50</option>
<option value="11:00">11:00</option>
<option value="11:10">11:10</option>
<option value="11:20">11:20</option>
<option value="11:30">11:30</option>
<option value="11:40">11:40</option>
<option value="11:50">11:50</option>
<option value="12:00">12:00</option>
<option value="12:10">12:10</option>
<option value="12:20">12:20</option>
<option value="12:30">12:30</option>
<option value="12:40">12:40</option>
<option value="12:50">12:50</option>
<option value="13:00">13:00</option>
<option value="13:10">13:10</option>
<option value="13:20">13:20</option>
<option value="13:30">13:30</option>
<option value="13:40">13:40</option>
<option value="13:50">13:50</option>
<option value="14:00">14:00</option>
<option value="14:10">14:10</option>
<option value="14:20">14:20</option>
<option value="14:30">14:30</option>
<option value="14:40">14:40</option>
<option value="14:50">14:50</option>
<option value="15:00">15:00</option>
<option value="15:10">15:10</option>
<option value="15:20">15:20</option>
<option value="15:30">15:30</option>
<option value="15:40">15:40</option>
<option value="15:50">15:50</option>
<option value="16:00">16:00</option>
<option value="16:10">16:10</option>
<option value="16:20">16:20</option>
<option value="16:30">16:30</option>
<option value="16:40">16:40</option>
<option value="16:50">16:50</option>
<option value="17:00">17:00</option>
<option value="17:10">17:10</option>
<option value="17:20">17:20</option>
<option value="17:30">17:30</option>
<option value="17:40">17:40</option>
<option value="17:50">17:50</option>
<option value="18:00">18:00</option>
<option value="18:10">18:10</option>
<option value="18:20">18:20</option>
<option value="18:30">18:30</option>
<option value="18:40">18:40</option>
<option value="18:50">18:50</option>
<option value="19:00">19:00</option>
<option value="19:10">19:10</option>
<option value="19:20">19:20</option>
<option value="19:30">19:30</option>
<option value="19:40">19:40</option>
<option value="19:50">19:50</option>
<option value="20:00">20:00</option>
<option value="20:10">20:10</option>
<option value="20:20">20:20</option>
<option value="20:30">20:30</option>
<option value="20:40">20:40</option>
<option value="20:50">20:50</option>
<option value="21:00">21:00</option>
<option value="21:10">21:10</option>
<option value="21:20">21:20</option>
<option value="21:30">21:30</option>
<option value="21:40">21:40</option>
<option value="21:50">21:50</option>
<option value="22:00">22:00</option>
<option value="22:10">22:10</option>
<option value="22:20">22:20</option>
<option value="22:30">22:30</option>
<option value="22:40">22:40</option>
<option value="22:50">22:50</option>
<option value="23:00">23:00</option>
<option value="23:10">23:10</option>
<option value="23:20">23:20</option>
<option value="23:30">23:30</option>
<option value="23:40">23:40</option>
<option value="23:50">23:50</option>
</select>

12-hour clock

Bash Command

echo "<select>"
for m in {0..5}; do echo "<option value=\"12:$m"0" AM\">12:$m"0 AM"</option>"; done;
for h in {1..11}; do for m in {0..5}; do echo "<option value=\"$h:$m"0" AM\">$h:$m"0 AM"</option>"; done; done
for m in {0..5}; do echo "<option value=\"12:$m"0" PM\">12:$m"0 PM"</option>"; done;
for h in {1..11}; do for m in {0..5}; do echo "<option value=\"$h:$m"0" PM\">$h:$m"0 PM"</option>"; done; done
echo "</select>"

For the 12-hour clock, the 12 AM and PM times come before the 1 AM and PM respectively. That being said, they are done as separate loops before the 1-11 hours. The commands above may have some lines that have to be removed, such as the prompt appearing between each command, but removing those lines will not take hardly any effort in comparison to typing out all of the times.

Command Output

<select>
<option value="12:00 AM">12:00 AM</option>
<option value="12:10 AM">12:10 AM</option>
<option value="12:20 AM">12:20 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="12:40 AM">12:40 AM</option>
<option value="12:50 AM">12:50 AM</option>

<option value="1:00 AM">1:00 AM</option>
<option value="1:10 AM">1:10 AM</option>
<option value="1:20 AM">1:20 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="1:40 AM">1:40 AM</option>
<option value="1:50 AM">1:50 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:10 AM">2:10 AM</option>
<option value="2:20 AM">2:20 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="2:40 AM">2:40 AM</option>
<option value="2:50 AM">2:50 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:10 AM">3:10 AM</option>
<option value="3:20 AM">3:20 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="3:40 AM">3:40 AM</option>
<option value="3:50 AM">3:50 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:10 AM">4:10 AM</option>
<option value="4:20 AM">4:20 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="4:40 AM">4:40 AM</option>
<option value="4:50 AM">4:50 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:10 AM">5:10 AM</option>
<option value="5:20 AM">5:20 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="5:40 AM">5:40 AM</option>
<option value="5:50 AM">5:50 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:10 AM">6:10 AM</option>
<option value="6:20 AM">6:20 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="6:40 AM">6:40 AM</option>
<option value="6:50 AM">6:50 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:10 AM">7:10 AM</option>
<option value="7:20 AM">7:20 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="7:40 AM">7:40 AM</option>
<option value="7:50 AM">7:50 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:10 AM">8:10 AM</option>
<option value="8:20 AM">8:20 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="8:40 AM">8:40 AM</option>
<option value="8:50 AM">8:50 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:10 AM">9:10 AM</option>
<option value="9:20 AM">9:20 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="9:40 AM">9:40 AM</option>
<option value="9:50 AM">9:50 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:10 AM">10:10 AM</option>
<option value="10:20 AM">10:20 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:40 AM">10:40 AM</option>
<option value="10:50 AM">10:50 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:10 AM">11:10 AM</option>
<option value="11:20 AM">11:20 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="11:40 AM">11:40 AM</option>
<option value="11:50 AM">11:50 AM</option>

<option value="12:00 PM">12:00 PM</option>
<option value="12:10 PM">12:10 PM</option>
<option value="12:20 PM">12:20 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="12:40 PM">12:40 PM</option>
<option value="12:50 PM">12:50 PM</option>

<option value="1:00 PM">1:00 PM</option>
<option value="1:10 PM">1:10 PM</option>
<option value="1:20 PM">1:20 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="1:40 PM">1:40 PM</option>
<option value="1:50 PM">1:50 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:10 PM">2:10 PM</option>
<option value="2:20 PM">2:20 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="2:40 PM">2:40 PM</option>
<option value="2:50 PM">2:50 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:10 PM">3:10 PM</option>
<option value="3:20 PM">3:20 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="3:40 PM">3:40 PM</option>
<option value="3:50 PM">3:50 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:10 PM">4:10 PM</option>
<option value="4:20 PM">4:20 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="4:40 PM">4:40 PM</option>
<option value="4:50 PM">4:50 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:10 PM">5:10 PM</option>
<option value="5:20 PM">5:20 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="5:40 PM">5:40 PM</option>
<option value="5:50 PM">5:50 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:10 PM">6:10 PM</option>
<option value="6:20 PM">6:20 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="6:40 PM">6:40 PM</option>
<option value="6:50 PM">6:50 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:10 PM">7:10 PM</option>
<option value="7:20 PM">7:20 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="7:40 PM">7:40 PM</option>
<option value="7:50 PM">7:50 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:10 PM">8:10 PM</option>
<option value="8:20 PM">8:20 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="8:40 PM">8:40 PM</option>
<option value="8:50 PM">8:50 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:10 PM">9:10 PM</option>
<option value="9:20 PM">9:20 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="9:40 PM">9:40 PM</option>
<option value="9:50 PM">9:50 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:10 PM">10:10 PM</option>
<option value="10:20 PM">10:20 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="10:40 PM">10:40 PM</option>
<option value="10:50 PM">10:50 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:10 PM">11:10 PM</option>
<option value="11:20 PM">11:20 PM</option>
<option value="11:30 PM">11:30 PM</option>
<option value="11:40 PM">11:40 PM</option>
<option value="11:50 PM">11:50 PM</option>
</select>

24-hour Clock for Values, 12-hour Clock for Display

Bash Command

echo "<select>"
for m in {0..5}; do echo "<option value=\"00:$m"0"\">12:$m"0 AM"</option>"; done;
for h in {1..9}; do for m in {0..5}; do echo "<option value=\"0$h:$m"0"\">$h:$m"0" AM\"</option>"; done; done
for h in {10..11}; do for m in {0..5}; do echo "<option value=\"$h:$m"0"\">$h:$m"0" AM\"</option>"; done; done
for m in {0..5}; do echo "<option value=\"12:$m"0"\">12:$m"0 PM"</option>"; done;
for h in {13..23}; do for m in {0..5}; do echo "<option value=\"$h:$m"0"\">$(($h-12)):$m"0" PM\"</option>"; done; done
echo "</select>"

After using and testing the code that I have above, I realized that in my particular situation, that the values that were being returned from the database were in the 24-hour clock, but the documentation and mockups that we had for the screen that this time list was to be used on, was in the 12-hour clock. Thus I had to make modifications to the code that provided in the two examples above.

I was able to accomplish the needed output with almost the same amount of commands as the 24-hour clock. However, the commands did have to be modified. For the PM times, I changed the loop to go from 13 to 23 for the option values and to use the same, but subtract 12 from each of the display values. For the AM times, I did have to the time with the leading zero so that it would align with the value being returned from the database. The rest of the command remained the same.

Command Output

<select>

<option value="12:00">12:00 AM</option>
<option value="12:10">12:10 AM</option>
<option value="12:20">12:20 AM</option>
<option value="12:30">12:30 AM</option>
<option value="12:40">12:40 AM</option>
<option value="12:50">12:50 AM</option>

<option value="01:00">1:00 AM"</option>
<option value="01:10">1:10 AM"</option>
<option value="01:20">1:20 AM"</option>
<option value="01:30">1:30 AM"</option>
<option value="01:40">1:40 AM"</option>
<option value="01:50">1:50 AM"</option>
<option value="02:00">2:00 AM"</option>
<option value="02:10">2:10 AM"</option>
<option value="02:20">2:20 AM"</option>
<option value="02:30">2:30 AM"</option>
<option value="02:40">2:40 AM"</option>
<option value="02:50">2:50 AM"</option>
<option value="03:00">3:00 AM"</option>
<option value="03:10">3:10 AM"</option>
<option value="03:20">3:20 AM"</option>
<option value="03:30">3:30 AM"</option>
<option value="03:40">3:40 AM"</option>
<option value="03:50">3:50 AM"</option>
<option value="04:00">4:00 AM"</option>
<option value="04:10">4:10 AM"</option>
<option value="04:20">4:20 AM"</option>
<option value="04:30">4:30 AM"</option>
<option value="04:40">4:40 AM"</option>
<option value="04:50">4:50 AM"</option>
<option value="05:00">5:00 AM"</option>
<option value="05:10">5:10 AM"</option>
<option value="05:20">5:20 AM"</option>
<option value="05:30">5:30 AM"</option>
<option value="05:40">5:40 AM"</option>
<option value="05:50">5:50 AM"</option>
<option value="06:00">6:00 AM"</option>
<option value="06:10">6:10 AM"</option>
<option value="06:20">6:20 AM"</option>
<option value="06:30">6:30 AM"</option>
<option value="06:40">6:40 AM"</option>
<option value="06:50">6:50 AM"</option>
<option value="07:00">7:00 AM"</option>
<option value="07:10">7:10 AM"</option>
<option value="07:20">7:20 AM"</option>
<option value="07:30">7:30 AM"</option>
<option value="07:40">7:40 AM"</option>
<option value="07:50">7:50 AM"</option>
<option value="08:00">8:00 AM"</option>
<option value="08:10">8:10 AM"</option>
<option value="08:20">8:20 AM"</option>
<option value="08:30">8:30 AM"</option>
<option value="08:40">8:40 AM"</option>
<option value="08:50">8:50 AM"</option>
<option value="09:00">9:00 AM"</option>
<option value="09:10">9:10 AM"</option>
<option value="09:20">9:20 AM"</option>
<option value="09:30">9:30 AM"</option>
<option value="09:40">9:40 AM"</option>
<option value="09:50">9:50 AM"</option>

<option value="10:00">10:00 AM"</option>
<option value="10:10">10:10 AM"</option>
<option value="10:20">10:20 AM"</option>
<option value="10:30">10:30 AM"</option>
<option value="10:40">10:40 AM"</option>
<option value="10:50">10:50 AM"</option>
<option value="11:00">11:00 AM"</option>
<option value="11:10">11:10 AM"</option>
<option value="11:20">11:20 AM"</option>
<option value="11:30">11:30 AM"</option>
<option value="11:40">11:40 AM"</option>
<option value="11:50">11:50 AM"</option>

<option value="12:00">12:00 PM</option>
<option value="12:10">12:10 PM</option>
<option value="12:20">12:20 PM</option>
<option value="12:30">12:30 PM</option>
<option value="12:40">12:40 PM</option>
<option value="12:50">12:50 PM</option>

<option value="13:00">1:00 PM"</option>
<option value="13:10">1:10 PM"</option>
<option value="13:20">1:20 PM"</option>
<option value="13:30">1:30 PM"</option>
<option value="13:40">1:40 PM"</option>
<option value="13:50">1:50 PM"</option>
<option value="14:00">2:00 PM"</option>
<option value="14:10">2:10 PM"</option>
<option value="14:20">2:20 PM"</option>
<option value="14:30">2:30 PM"</option>
<option value="14:40">2:40 PM"</option>
<option value="14:50">2:50 PM"</option>
<option value="15:00">3:00 PM"</option>
<option value="15:10">3:10 PM"</option>
<option value="15:20">3:20 PM"</option>
<option value="15:30">3:30 PM"</option>
<option value="15:40">3:40 PM"</option>
<option value="15:50">3:50 PM"</option>
<option value="16:00">4:00 PM"</option>
<option value="16:10">4:10 PM"</option>
<option value="16:20">4:20 PM"</option>
<option value="16:30">4:30 PM"</option>
<option value="16:40">4:40 PM"</option>
<option value="16:50">4:50 PM"</option>
<option value="17:00">5:00 PM"</option>
<option value="17:10">5:10 PM"</option>
<option value="17:20">5:20 PM"</option>
<option value="17:30">5:30 PM"</option>
<option value="17:40">5:40 PM"</option>
<option value="17:50">5:50 PM"</option>
<option value="18:00">6:00 PM"</option>
<option value="18:10">6:10 PM"</option>
<option value="18:20">6:20 PM"</option>
<option value="18:30">6:30 PM"</option>
<option value="18:40">6:40 PM"</option>
<option value="18:50">6:50 PM"</option>
<option value="19:00">7:00 PM"</option>
<option value="19:10">7:10 PM"</option>
<option value="19:20">7:20 PM"</option>
<option value="19:30">7:30 PM"</option>
<option value="19:40">7:40 PM"</option>
<option value="19:50">7:50 PM"</option>
<option value="20:00">8:00 PM"</option>
<option value="20:10">8:10 PM"</option>
<option value="20:20">8:20 PM"</option>
<option value="20:30">8:30 PM"</option>
<option value="20:40">8:40 PM"</option>
<option value="20:50">8:50 PM"</option>
<option value="21:00">9:00 PM"</option>
<option value="21:10">9:10 PM"</option>
<option value="21:20">9:20 PM"</option>
<option value="21:30">9:30 PM"</option>
<option value="21:40">9:40 PM"</option>
<option value="21:50">9:50 PM"</option>
<option value="22:00">10:00 PM"</option>
<option value="22:10">10:10 PM"</option>
<option value="22:20">10:20 PM"</option>
<option value="22:30">10:30 PM"</option>
<option value="22:40">10:40 PM"</option>
<option value="22:50">10:50 PM"</option>
<option value="23:00">11:00 PM"</option>
<option value="23:10">11:10 PM"</option>
<option value="23:20">11:20 PM"</option>
<option value="23:30">11:30 PM"</option>
<option value="23:40">11:40 PM"</option>
<option value="23:50">11:50 PM"</option>

</select>

Conclusion

This code is to be used as a pre-built snippet. I couldn't find one online, so I decided to create one in case I needed it in the future. The minutes can be adjusted as need be in the inner for loop if need be.

Published: 2020-08-25
Updated: 2020-09-02
Author: Kenny Robinson
Category: Technology
Keywords: html code snippet, select list of times, select list, bash, linux, time selector, select list of hours
Read Time: 35 minute(s)