First of all you are going to want to change your $datesAvailableArray
so that it contains an actual dates.
ISO 8601 strings are an excellent format.
$datesAvailableArray = array(
'Saturday' => array(
'2014-11-14T11:00:00Z',
'2014-11-14T12:00:00Z',
'2014-11-14T13:00:00Z',
'2014-11-14T14:00:00Z'
),
'Sunday' => array(
'2014-11-15T11:00:00Z',
'2014-11-15T12:00:00Z',
'2014-11-15T13:00:00Z',
'2014-11-15T14:00:00Z'
)
);
Now that we have date strings we can create DateTime objects that we use to format the date:
$saturday_1100 = DateTimeImmutable::createFromFormat(DateTime::ISO8601, '2014-11-14T11:00:00Z');
$saturday_1100->format('g:ia'); // 11:00am
In our case we are using the DateTimeImmutable class since we don’t want to change the dates after they are created.
So lets change our makeTable
function to use our new friend DateTimeImmutable
:
function makeTable($data) {
$headers = array_map(function($a) {
return "<th>$a</th>";
}, array_keys($data));
$max_indice = max( array_map(function($day) {
return count($day) - 1;
}, $data) );
// Create a new array where we group by hour
$rows = array_map(function($i) use ($data) {
// create each hour
return '<tr>' . join( array_map(function($day) use ($i){
$ts = isset($day[$i]) ? DateTimeImmutable::createFromFormat(DateTime::ISO8601, $day[$i]) : null;
if ($ts){
$label="<label for="datetime">".$ts->format('g:ia').'</label>';
$input = vsprintf (
'<input type="checkbox" name="datetime" id="%s" value="%s" />',
array(
'datetime_'. $ts->getTimestamp(), // ID
$ts->format('c') // Value
)
);
return '<td>' . $label . $input . '<td>';
} else {
return '<td></td>';
}
}, $data)) . '</tr>';
}, range(0, $max_indice));
// DonĀ“t get rid of the thead element.
// It tells the browser that your table is a real table containing data and not just a crappy layout.
return "
<table>
<caption>My Table</caption>
<thead>".join($headers,'\n')."</thead>
<tbody>".join($rows, '\n')."</tbody>
</table>";
}
echo makeTable( $datesAvailableArray );
Will give us something like this:
<table>
<caption>
My Table
</caption>
<thead>
<tr>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="datetime">11:00am</label><input type="checkbox" name="datetime" id="datetime_1415962800" value="2014-11-14T11:00:00+00:00" /></td>
<td><label for="datetime">11:00am</label><input type="checkbox" name="datetime" id="datetime_1416049200" value="2014-11-15T11:00:00+00:00" /></td>
</tr>
<tr>
<td><label for="datetime">12:00pm</label><input type="checkbox" name="datetime" id="datetime_1415966400" value="2014-11-14T12:00:00+00:00" /></td>
<td><label for="datetime">12:00pm</label><input type="checkbox" name="datetime" id="datetime_1416052800" value="2014-11-15T12:00:00+00:00" /></td>
</tr>
<!-- MORE ... -->
</tbody>
</table>
Summary:
We have unique values for the input id. The value that we send when posting this form is a ISO-8601 date string.
We also have wrapped our hour text in <label>
tags with a for attribute which is good for accessibility.
solved PHP issue with checkbox value [closed]