Change time to 12 hr format

Question

I need to add a time selector with 30 min intervals. I did a quick search and came across the following function that does a great job in very efficient way:

for($hours=0; $hours<24; $hours++) // the interval for hours is '1'
    for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30'
        echo '<option>'.str_pad($hours,2,'0',STR_PAD_LEFT).':'
                       .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';

The only problem is that it outputs in the following format:

<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>13:00</option>
<option>13:30</option>

I need to make a few modifications. I'd like to keep the value in the same format, but display it in 12 hr format:

<option value="11:00">11:00 am</option>
<option value="11:30">11:30 am</option>
<option value="12:00">12:00 pm</option>
<option value="12:30">12:30 pm</option>
<option value="13:00">1:00 pm</option>
<option value="13:30">1:30 pm</option>

So, the first part is easy, but not really clear on the display side:

for($hours=0; $hours<24; $hours++) // the interval for hours is '1'
    for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30'
        echo '<option value="'.str_pad($hours,2,'0',STR_PAD_LEFT).':'                           .str_pad($mins,2,'0',STR_PAD_LEFT).'">'.str_pad($hours,2,'0',STR_PAD_LEFT).':'
                       .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';

What should the `value` attribute look like? Something like `11:30am` and `11:30pm`? — Sverri M. Olsen, Apr 13 '15 at 14:01
On the page you got this code: http://stackoverflow.com/questions/7941202/how-to-create-a-dropdown-of-time try the code below the accepted answer with the DateTime object. That approach lets you customize the format using `$time->format('H:i:s')` or whatever you want the format to be — Anton, Apr 13 '15 at 14:04

Matthew Brown · Answer 1 · 2015-04-13T15:42:41.270

Here is using your current implementation, just altered a bit.

for($hours=0; $hours<24; $hours++) { // the interval for hours is '1'
    for($mins=0; $mins<60; $mins+=30) { // the interval for mins is '30'

         $time =  str_pad($hours,2,'0',STR_PAD_LEFT).':'.str_pad($mins,2,'0',STR_PAD_LEFT);

         echo '<option value="'.date('h:i', strtotime($time)).'">'.date('h:i', strtotime($time)).'</option>';
    }
}

score 0 · Answer 2 · answered Apr 13 '15 at 14:06

Don't make it complicated, use DateTime:

<?php

    $start = new DateTime("00:00");
    $end = (new DateTime("00:00"))->modify("+ 1 day");
    $interval = new DateInterval('PT30M');
    $period = new DatePeriod($start, $interval, $end);

    echo "<select>";
    foreach($period as $time)
        echo "<option value='" . $time->format("H:i") . "'>" . $time->format("h:i a") . "</option>";
    echo "</select>";

?>

Then you can change the format as you want it!

With 12 hour format (h:i a):

12:00 am
//...
11:30 pm

OR 24 hour format (H:i):

00:00
//...
23:30

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

You can try this:

$start    = new DateTime('2000-01-01 00:00');
$end      = new DateTime('2000-01-02 00:00');
$interval = DateInterval::createFromDateString('+30 minutes');
$period   = new DatePeriod($start, $interval, $end);
foreach ($period as $time) {
    echo $time->format("H:ia") . "<br>\n";
}

It is a modified version of a previous answer of mine.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 13 '15 at 14:10

Sverri M. Olsen

13,055
3
36
52

score 0 · Answer 4 · answered Apr 13 '15 at 14:17

I'd try something like this:

for($hours=0; $hours<24; $hours++) { // the interval for hours is '1'
    for($mins=0; $mins<60; $mins+=30) { // the interval for mins is '30'
        $hours = str_pad($hours, 2, '0', STR_PAD_LEFT);
        $mins = str_pad($mins, 2, '0', STR_PAD_LEFT);
        $twelve_hours = ($hours > 12) ? $hours - 12 : $hours;
        $am_pm = ($hours > 12) ? "pm" : "am";
        echo '<option value="'.$hours.":".$mins.'">'.$twelve_hours.":".$mins." ".$am_pm.'</option>';
    }
}

Simply subtract 12 from the hours if they are > 12, and set am/pm if they still are > 12

Result:

...
<option value="12:00">12:00 am</option>
<option value="12:30">12:30 am</option>
<option value="13:00">1:00 pm</option>
<option value="14:00">2:00 pm</option>
<option value="14:30">2:30 pm</option>
...

score 0 · Accepted Answer · answered Apr 13 '15 at 14:18

Based on your code:

for($hours=0; $hours<24; $hours++) // the interval for hours is '1'
    for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30'
        echo '<option>'.str_pad(($hours%12),2,'0',STR_PAD_LEFT).':'
                   .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';

Although, there are other ways to do this. Check the remaining answers for more ideas. I think you are going to learn more from them.

Change time to 12 hr format

5 Answers5