Svetoslav Marinov’s Blog

Time HTML select menus

Option #1 12 Hour time

// Generate an associative array -> '00:00 am' => '00:00 am'. The step is 5 mins
$time = array('' => '---');

$hours = range(0, 11);
$mins  = range(0, 59, 5);

foreach (array(0, 1) as $iter) {
$am_pm = $iter == 0 ? 'am' : 'pm';
foreach ($hours as $h) {
foreach ($mins as $m) {
$val = sprintf("%02d:%02d", $h, $m) . ' ' . $am_pm;
$time[$val] = $val;
}
}
}

How to create the dropdown menu

echo getHTMLSelect('dropdown', $time, @$_REQUEST['time']);

Option #2 Time 24 hour (military) time dropdown HTML select menu

// Generate an associative array -> '00:00' => '23:00'. The step is 5 mins
$hours = range(0, 23);
$mins  = range(0, 59, 5);
$time  = array('' => '---');

foreach ($hours as $h) {
foreach ($mins as $m) {
$val = sprintf("%02d:%02d", $h, $m);
$time[$val] = $val;
}
}

echo getHTMLSelect('dropdown', $time, @$_REQUEST['time']);

/**
* Returns an HTML dropdown menu.
*
* @param string $name HTML select name
* @param array $values options key value
* @param int $selected_id currently selected ID
* @param string $attr several attributes that will be added in <select ....>
* @return string
*/
function getHTMLSelect($name = 'dropdown', $values = array(), $selected_id = 0, $attr = '') {
$buff = "<select name=\"$name\" $attr>\n";

foreach($values as $k => $v) {
$s = ($selected_id == $k) ? " selected='selected'" : '';
$v = htmlentities($v, ENT_QUOTES, 'UTF-8');
$buff .= "<option value=\"$k\" $s>$v</option>\n";
}

$buff .= "</select>\n";
return $buff;
}

Outputs

Option #1

array (
'' => '---',
'00:00 am' => '00:00 am',
'00:05 am' => '00:05 am',
'00:10 am' => '00:10 am',
'00:15 am' => '00:15 am',
'00:20 am' => '00:20 am',
'00:25 am' => '00:25 am',
'00:30 am' => '00:30 am',
'00:35 am' => '00:35 am',
'00:40 am' => '00:40 am',
'00:45 am' => '00:45 am',
'00:50 am' => '00:50 am',
'00:55 am' => '00:55 am',
'01:00 am' => '01:00 am',
'01:05 am' => '01:05 am',
'01:10 am' => '01:10 am',
'01:15 am' => '01:15 am',
'01:20 am' => '01:20 am',
'01:25 am' => '01:25 am',
'01:30 am' => '01:30 am',
'01:35 am' => '01:35 am',
'01:40 am' => '01:40 am',
'01:45 am' => '01:45 am',
'01:50 am' => '01:50 am',
'01:55 am' => '01:55 am',
'02:00 am' => '02:00 am',
'02:05 am' => '02:05 am',
'02:10 am' => '02:10 am',
'02:15 am' => '02:15 am',
'02:20 am' => '02:20 am',
'02:25 am' => '02:25 am',
'02:30 am' => '02:30 am',
'02:35 am' => '02:35 am',
'02:40 am' => '02:40 am',
'02:45 am' => '02:45 am',
'02:50 am' => '02:50 am',
'02:55 am' => '02:55 am',
'03:00 am' => '03:00 am',
'03:05 am' => '03:05 am',
'03:10 am' => '03:10 am',
'03:15 am' => '03:15 am',
'03:20 am' => '03:20 am',
'03:25 am' => '03:25 am',
'03:30 am' => '03:30 am',
'03:35 am' => '03:35 am',
'03:40 am' => '03:40 am',
'03:45 am' => '03:45 am',
'03:50 am' => '03:50 am',
'03:55 am' => '03:55 am',
'04:00 am' => '04:00 am',
'04:05 am' => '04:05 am',
'04:10 am' => '04:10 am',
'04:15 am' => '04:15 am',
'04:20 am' => '04:20 am',
'04:25 am' => '04:25 am',
'04:30 am' => '04:30 am',
'04:35 am' => '04:35 am',
'04:40 am' => '04:40 am',
'04:45 am' => '04:45 am',
'04:50 am' => '04:50 am',
'04:55 am' => '04:55 am',
'05:00 am' => '05:00 am',
'05:05 am' => '05:05 am',
'05:10 am' => '05:10 am',
'05:15 am' => '05:15 am',
'05:20 am' => '05:20 am',
'05:25 am' => '05:25 am',
'05:30 am' => '05:30 am',
'05:35 am' => '05:35 am',
'05:40 am' => '05:40 am',
'05:45 am' => '05:45 am',
'05:50 am' => '05:50 am',
'05:55 am' => '05:55 am',
'06:00 am' => '06:00 am',
'06:05 am' => '06:05 am',
'06:10 am' => '06:10 am',
'06:15 am' => '06:15 am',
'06:20 am' => '06:20 am',
'06:25 am' => '06:25 am',
'06:30 am' => '06:30 am',
'06:35 am' => '06:35 am',
'06:40 am' => '06:40 am',
'06:45 am' => '06:45 am',
'06:50 am' => '06:50 am',
'06:55 am' => '06:55 am',
'07:00 am' => '07:00 am',
'07:05 am' => '07:05 am',
'07:10 am' => '07:10 am',
'07:15 am' => '07:15 am',
'07:20 am' => '07:20 am',
'07:25 am' => '07:25 am',
'07:30 am' => '07:30 am',
'07:35 am' => '07:35 am',
'07:40 am' => '07:40 am',
'07:45 am' => '07:45 am',
'07:50 am' => '07:50 am',
'07:55 am' => '07:55 am',
'08:00 am' => '08:00 am',
'08:05 am' => '08:05 am',
'08:10 am' => '08:10 am',
'08:15 am' => '08:15 am',
'08:20 am' => '08:20 am',
'08:25 am' => '08:25 am',
'08:30 am' => '08:30 am',
'08:35 am' => '08:35 am',
'08:40 am' => '08:40 am',
'08:45 am' => '08:45 am',
'08:50 am' => '08:50 am',
'08:55 am' => '08:55 am',
'09:00 am' => '09:00 am',
'09:05 am' => '09:05 am',
'09:10 am' => '09:10 am',
'09:15 am' => '09:15 am',
'09:20 am' => '09:20 am',
'09:25 am' => '09:25 am',
'09:30 am' => '09:30 am',
'09:35 am' => '09:35 am',
'09:40 am' => '09:40 am',
'09:45 am' => '09:45 am',
'09:50 am' => '09:50 am',
'09:55 am' => '09:55 am',
'10:00 am' => '10:00 am',
'10:05 am' => '10:05 am',
'10:10 am' => '10:10 am',
'10:15 am' => '10:15 am',
'10:20 am' => '10:20 am',
'10:25 am' => '10:25 am',
'10:30 am' => '10:30 am',
'10:35 am' => '10:35 am',
'10:40 am' => '10:40 am',
'10:45 am' => '10:45 am',
'10:50 am' => '10:50 am',
'10:55 am' => '10:55 am',
'11:00 am' => '11:00 am',
'11:05 am' => '11:05 am',
'11:10 am' => '11:10 am',
'11:15 am' => '11:15 am',
'11:20 am' => '11:20 am',
'11:25 am' => '11:25 am',
'11:30 am' => '11:30 am',
'11:35 am' => '11:35 am',
'11:40 am' => '11:40 am',
'11:45 am' => '11:45 am',
'11:50 am' => '11:50 am',
'11:55 am' => '11:55 am',
'00:00 pm' => '00:00 pm',
'00:05 pm' => '00:05 pm',
'00:10 pm' => '00:10 pm',
'00:15 pm' => '00:15 pm',
'00:20 pm' => '00:20 pm',
'00:25 pm' => '00:25 pm',
'00:30 pm' => '00:30 pm',
'00:35 pm' => '00:35 pm',
'00:40 pm' => '00:40 pm',
'00:45 pm' => '00:45 pm',
'00:50 pm' => '00:50 pm',
'00:55 pm' => '00:55 pm',
'01:00 pm' => '01:00 pm',
'01:05 pm' => '01:05 pm',
'01:10 pm' => '01:10 pm',
'01:15 pm' => '01:15 pm',
'01:20 pm' => '01:20 pm',
'01:25 pm' => '01:25 pm',
'01:30 pm' => '01:30 pm',
'01:35 pm' => '01:35 pm',
'01:40 pm' => '01:40 pm',
'01:45 pm' => '01:45 pm',
'01:50 pm' => '01:50 pm',
'01:55 pm' => '01:55 pm',
'02:00 pm' => '02:00 pm',
'02:05 pm' => '02:05 pm',
'02:10 pm' => '02:10 pm',
'02:15 pm' => '02:15 pm',
'02:20 pm' => '02:20 pm',
'02:25 pm' => '02:25 pm',
'02:30 pm' => '02:30 pm',
'02:35 pm' => '02:35 pm',
'02:40 pm' => '02:40 pm',
'02:45 pm' => '02:45 pm',
'02:50 pm' => '02:50 pm',
'02:55 pm' => '02:55 pm',
'03:00 pm' => '03:00 pm',
'03:05 pm' => '03:05 pm',
'03:10 pm' => '03:10 pm',
'03:15 pm' => '03:15 pm',
'03:20 pm' => '03:20 pm',
'03:25 pm' => '03:25 pm',
'03:30 pm' => '03:30 pm',
'03:35 pm' => '03:35 pm',
'03:40 pm' => '03:40 pm',
'03:45 pm' => '03:45 pm',
'03:50 pm' => '03:50 pm',
'03:55 pm' => '03:55 pm',
'04:00 pm' => '04:00 pm',
'04:05 pm' => '04:05 pm',
'04:10 pm' => '04:10 pm',
'04:15 pm' => '04:15 pm',
'04:20 pm' => '04:20 pm',
'04:25 pm' => '04:25 pm',
'04:30 pm' => '04:30 pm',
'04:35 pm' => '04:35 pm',
'04:40 pm' => '04:40 pm',
'04:45 pm' => '04:45 pm',
'04:50 pm' => '04:50 pm',
'04:55 pm' => '04:55 pm',
'05:00 pm' => '05:00 pm',
'05:05 pm' => '05:05 pm',
'05:10 pm' => '05:10 pm',
'05:15 pm' => '05:15 pm',
'05:20 pm' => '05:20 pm',
'05:25 pm' => '05:25 pm',
'05:30 pm' => '05:30 pm',
'05:35 pm' => '05:35 pm',
'05:40 pm' => '05:40 pm',
'05:45 pm' => '05:45 pm',
'05:50 pm' => '05:50 pm',
'05:55 pm' => '05:55 pm',
'06:00 pm' => '06:00 pm',
'06:05 pm' => '06:05 pm',
'06:10 pm' => '06:10 pm',
'06:15 pm' => '06:15 pm',
'06:20 pm' => '06:20 pm',
'06:25 pm' => '06:25 pm',
'06:30 pm' => '06:30 pm',
'06:35 pm' => '06:35 pm',
'06:40 pm' => '06:40 pm',
'06:45 pm' => '06:45 pm',
'06:50 pm' => '06:50 pm',
'06:55 pm' => '06:55 pm',
'07:00 pm' => '07:00 pm',
'07:05 pm' => '07:05 pm',
'07:10 pm' => '07:10 pm',
'07:15 pm' => '07:15 pm',
'07:20 pm' => '07:20 pm',
'07:25 pm' => '07:25 pm',
'07:30 pm' => '07:30 pm',
'07:35 pm' => '07:35 pm',
'07:40 pm' => '07:40 pm',
'07:45 pm' => '07:45 pm',
'07:50 pm' => '07:50 pm',
'07:55 pm' => '07:55 pm',
'08:00 pm' => '08:00 pm',
'08:05 pm' => '08:05 pm',
'08:10 pm' => '08:10 pm',
'08:15 pm' => '08:15 pm',
'08:20 pm' => '08:20 pm',
'08:25 pm' => '08:25 pm',
'08:30 pm' => '08:30 pm',
'08:35 pm' => '08:35 pm',
'08:40 pm' => '08:40 pm',
'08:45 pm' => '08:45 pm',
'08:50 pm' => '08:50 pm',
'08:55 pm' => '08:55 pm',
'09:00 pm' => '09:00 pm',
'09:05 pm' => '09:05 pm',
'09:10 pm' => '09:10 pm',
'09:15 pm' => '09:15 pm',
'09:20 pm' => '09:20 pm',
'09:25 pm' => '09:25 pm',
'09:30 pm' => '09:30 pm',
'09:35 pm' => '09:35 pm',
'09:40 pm' => '09:40 pm',
'09:45 pm' => '09:45 pm',
'09:50 pm' => '09:50 pm',
'09:55 pm' => '09:55 pm',
'10:00 pm' => '10:00 pm',
'10:05 pm' => '10:05 pm',
'10:10 pm' => '10:10 pm',
'10:15 pm' => '10:15 pm',
'10:20 pm' => '10:20 pm',
'10:25 pm' => '10:25 pm',
'10:30 pm' => '10:30 pm',
'10:35 pm' => '10:35 pm',
'10:40 pm' => '10:40 pm',
'10:45 pm' => '10:45 pm',
'10:50 pm' => '10:50 pm',
'10:55 pm' => '10:55 pm',
'11:00 pm' => '11:00 pm',
'11:05 pm' => '11:05 pm',
'11:10 pm' => '11:10 pm',
'11:15 pm' => '11:15 pm',
'11:20 pm' => '11:20 pm',
'11:25 pm' => '11:25 pm',
'11:30 pm' => '11:30 pm',
'11:35 pm' => '11:35 pm',
'11:40 pm' => '11:40 pm',
'11:45 pm' => '11:45 pm',
'11:50 pm' => '11:50 pm',
'11:55 pm' => '11:55 pm',
)

Option #2

array (
'' => '---',
'00:00' => '00:00',
'00:05' => '00:05',
'00:10' => '00:10',
'00:15' => '00:15',
'00:20' => '00:20',
'00:25' => '00:25',
'00:30' => '00:30',
'00:35' => '00:35',
'00:40' => '00:40',
'00:45' => '00:45',
'00:50' => '00:50',
'00:55' => '00:55',
'01:00' => '01:00',
'01:05' => '01:05',
'01:10' => '01:10',
'01:15' => '01:15',
'01:20' => '01:20',
'01:25' => '01:25',
'01:30' => '01:30',
'01:35' => '01:35',
'01:40' => '01:40',
'01:45' => '01:45',
'01:50' => '01:50',
'01:55' => '01:55',
'02:00' => '02:00',
'02:05' => '02:05',
'02:10' => '02:10',
'02:15' => '02:15',
'02:20' => '02:20',
'02:25' => '02:25',
'02:30' => '02:30',
'02:35' => '02:35',
'02:40' => '02:40',
'02:45' => '02:45',
'02:50' => '02:50',
'02:55' => '02:55',
'03:00' => '03:00',
'03:05' => '03:05',
'03:10' => '03:10',
'03:15' => '03:15',
'03:20' => '03:20',
'03:25' => '03:25',
'03:30' => '03:30',
'03:35' => '03:35',
'03:40' => '03:40',
'03:45' => '03:45',
'03:50' => '03:50',
'03:55' => '03:55',
'04:00' => '04:00',
'04:05' => '04:05',
'04:10' => '04:10',
'04:15' => '04:15',
'04:20' => '04:20',
'04:25' => '04:25',
'04:30' => '04:30',
'04:35' => '04:35',
'04:40' => '04:40',
'04:45' => '04:45',
'04:50' => '04:50',
'04:55' => '04:55',
'05:00' => '05:00',
'05:05' => '05:05',
'05:10' => '05:10',
'05:15' => '05:15',
'05:20' => '05:20',
'05:25' => '05:25',
'05:30' => '05:30',
'05:35' => '05:35',
'05:40' => '05:40',
'05:45' => '05:45',
'05:50' => '05:50',
'05:55' => '05:55',
'06:00' => '06:00',
'06:05' => '06:05',
'06:10' => '06:10',
'06:15' => '06:15',
'06:20' => '06:20',
'06:25' => '06:25',
'06:30' => '06:30',
'06:35' => '06:35',
'06:40' => '06:40',
'06:45' => '06:45',
'06:50' => '06:50',
'06:55' => '06:55',
'07:00' => '07:00',
'07:05' => '07:05',
'07:10' => '07:10',
'07:15' => '07:15',
'07:20' => '07:20',
'07:25' => '07:25',
'07:30' => '07:30',
'07:35' => '07:35',
'07:40' => '07:40',
'07:45' => '07:45',
'07:50' => '07:50',
'07:55' => '07:55',
'08:00' => '08:00',
'08:05' => '08:05',
'08:10' => '08:10',
'08:15' => '08:15',
'08:20' => '08:20',
'08:25' => '08:25',
'08:30' => '08:30',
'08:35' => '08:35',
'08:40' => '08:40',
'08:45' => '08:45',
'08:50' => '08:50',
'08:55' => '08:55',
'09:00' => '09:00',
'09:05' => '09:05',
'09:10' => '09:10',
'09:15' => '09:15',
'09:20' => '09:20',
'09:25' => '09:25',
'09:30' => '09:30',
'09:35' => '09:35',
'09:40' => '09:40',
'09:45' => '09:45',
'09:50' => '09:50',
'09:55' => '09:55',
'10:00' => '10:00',
'10:05' => '10:05',
'10:10' => '10:10',
'10:15' => '10:15',
'10:20' => '10:20',
'10:25' => '10:25',
'10:30' => '10:30',
'10:35' => '10:35',
'10:40' => '10:40',
'10:45' => '10:45',
'10:50' => '10:50',
'10:55' => '10:55',
'11:00' => '11:00',
'11:05' => '11:05',
'11:10' => '11:10',
'11:15' => '11:15',
'11:20' => '11:20',
'11:25' => '11:25',
'11:30' => '11:30',
'11:35' => '11:35',
'11:40' => '11:40',
'11:45' => '11:45',
'11:50' => '11:50',
'11:55' => '11:55',
'12:00' => '12:00',
'12:05' => '12:05',
'12:10' => '12:10',
'12:15' => '12:15',
'12:20' => '12:20',
'12:25' => '12:25',
'12:30' => '12:30',
'12:35' => '12:35',
'12:40' => '12:40',
'12:45' => '12:45',
'12:50' => '12:50',
'12:55' => '12:55',
'13:00' => '13:00',
'13:05' => '13:05',
'13:10' => '13:10',
'13:15' => '13:15',
'13:20' => '13:20',
'13:25' => '13:25',
'13:30' => '13:30',
'13:35' => '13:35',
'13:40' => '13:40',
'13:45' => '13:45',
'13:50' => '13:50',
'13:55' => '13:55',
'14:00' => '14:00',
'14:05' => '14:05',
'14:10' => '14:10',
'14:15' => '14:15',
'14:20' => '14:20',
'14:25' => '14:25',
'14:30' => '14:30',
'14:35' => '14:35',
'14:40' => '14:40',
'14:45' => '14:45',
'14:50' => '14:50',
'14:55' => '14:55',
'15:00' => '15:00',
'15:05' => '15:05',
'15:10' => '15:10',
'15:15' => '15:15',
'15:20' => '15:20',
'15:25' => '15:25',
'15:30' => '15:30',
'15:35' => '15:35',
'15:40' => '15:40',
'15:45' => '15:45',
'15:50' => '15:50',
'15:55' => '15:55',
'16:00' => '16:00',
'16:05' => '16:05',
'16:10' => '16:10',
'16:15' => '16:15',
'16:20' => '16:20',
'16:25' => '16:25',
'16:30' => '16:30',
'16:35' => '16:35',
'16:40' => '16:40',
'16:45' => '16:45',
'16:50' => '16:50',
'16:55' => '16:55',
'17:00' => '17:00',
'17:05' => '17:05',
'17:10' => '17:10',
'17:15' => '17:15',
'17:20' => '17:20',
'17:25' => '17:25',
'17:30' => '17:30',
'17:35' => '17:35',
'17:40' => '17:40',
'17:45' => '17:45',
'17:50' => '17:50',
'17:55' => '17:55',
'18:00' => '18:00',
'18:05' => '18:05',
'18:10' => '18:10',
'18:15' => '18:15',
'18:20' => '18:20',
'18:25' => '18:25',
'18:30' => '18:30',
'18:35' => '18:35',
'18:40' => '18:40',
'18:45' => '18:45',
'18:50' => '18:50',
'18:55' => '18:55',
'19:00' => '19:00',
'19:05' => '19:05',
'19:10' => '19:10',
'19:15' => '19:15',
'19:20' => '19:20',
'19:25' => '19:25',
'19:30' => '19:30',
'19:35' => '19:35',
'19:40' => '19:40',
'19:45' => '19:45',
'19:50' => '19:50',
'19:55' => '19:55',
'20:00' => '20:00',
'20:05' => '20:05',
'20:10' => '20:10',
'20:15' => '20:15',
'20:20' => '20:20',
'20:25' => '20:25',
'20:30' => '20:30',
'20:35' => '20:35',
'20:40' => '20:40',
'20:45' => '20:45',
'20:50' => '20:50',
'20:55' => '20:55',
'21:00' => '21:00',
'21:05' => '21:05',
'21:10' => '21:10',
'21:15' => '21:15',
'21:20' => '21:20',
'21:25' => '21:25',
'21:30' => '21:30',
'21:35' => '21:35',
'21:40' => '21:40',
'21:45' => '21:45',
'21:50' => '21:50',
'21:55' => '21:55',
'22:00' => '22:00',
'22:05' => '22:05',
'22:10' => '22:10',
'22:15' => '22:15',
'22:20' => '22:20',
'22:25' => '22:25',
'22:30' => '22:30',
'22:35' => '22:35',
'22:40' => '22:40',
'22:45' => '22:45',
'22:50' => '22:50',
'22:55' => '22:55',
'23:00' => '23:00',
'23:05' => '23:05',
'23:10' => '23:10',
'23:15' => '23:15',
'23:20' => '23:20',
'23:25' => '23:25',
'23:30' => '23:30',
'23:35' => '23:35',
'23:40' => '23:40',
'23:45' => '23:45',
'23:50' => '23:50',
'23:55' => '23:55',
)

If you have some sites that do not rely on a framework you could use this function to generate a simple HTML select.
Note: It won't preselect multiple values.
You could download the code because it usually doesn't look good in wordpress.

//echo getHTMLSelect('dropdown', array(0 => "", 1 => "'test'\"", 2 => "test2"), @$_REQUEST['sel']);

/**
* Returns an HTML dropdown menu.
*
* @param string $name HTML select name
* @param array $values options key value
* @param int $selected_id currently selected ID
* @param string $attr several attributes that will be added in <select ....>
* @return string
*/
function getHTMLSelect($name = 'dropdown', $values = array(), $selected_id = 0, $attr = '') {
$buff = "<select name=\"$name\" $attr>\n";
foreach($values as $k => $v) {
$s = ($selected_id == $k) ? " selected='selected'" : '';
$k = intval($k);
$v = htmlentities($v, ENT_QUOTES, 'UTF-8');
$buff .= "<option value=\"$k\" $s>$v</option>\n";
}

$buff .= "</select>\n";
return $buff;
}