Uhr­zeit mit zwei Klicks ein­ge­ben

Bei der Wei­ter­ent­wick­lung von Trudl habe ich auf eine mög­lichst ein­fa­che Bedie­nung und Benut­zung geach­tet. Dazu gehört z.B. der Ver­zicht auf Anmel­dun­gen, kei­ne Kopp­lung mit Face­book & Co. Die Ein­ga­be­mas­ken sind mög­lichst ein­fach gehal­ten und beschrän­ken sich auf das Nötigs­te. Die wich­tigs­ten Daten eines Ter­min­pla­ners ist jedoch der Ter­min, also ein Datum und eine Uhr­zeit.

Die Ein­ga­be eines Datum kann über Java­script-Plug­ins ver­ein­facht wer­den. Ich nut­ze ein Plug­in, wel­ches ohne zusätz­li­chem Frame­work aus­kommt:

• Pika­day

Für die Ein­ga­be von Uhr­zei­ten habe ich kein pas­sen­des Plug­in gefun­den. Die meis­ten Plug­ins nut­zen Frame­works wie jQuery oder Boot­strap. Allen Plug­ins gemein­sam: Man muss viel scrol­len um die pas­sen­de Uhr­zeit ein­zu­ge­ben.

Also habe ich mit ganz ein­fa­chen Bord­mit­teln (PHP, HTML & CSS) eine Ein­ga­be­mas­ke für Uhr­zei­ten ent­wi­ckelt. Der neben­ste­hen­de Screen­shot zeigt die Ein­ga­be­mas­ke für Ter­mi­ne. Beim Klick auf das Datum öff­net sich ein Popup-Fens­ter mit einem Kalen­der. Die Uhr­zeit kann mit zwei Klicks ein­ge­ge­ben wer­den. Man wählt die Stun­de (07, 08, … 22) und die Minu­te (00, 15, 30, 45), Fer­tig! Kein scrol­len und kei­ne Zah­len­ein­ga­be…

Das fol­gen­de PHP-Script gene­riert eine HTML-Tabel­le (4 Zei­len á 6 Spal­ten). Die ein­zel­nen Ele­men­te kön­nen über CSS for­ma­tiert wer­den. Die ange­zeig­te Uhr­zeit wird über einen Para­me­ter vor­ge­ge­ben. Z.B. printTimePicker(“19:30”):

function printTimePicker($time) {
$h0 = 7; // Base hour
if (!preg_match('/^[012][0-9]:[0-5][0-9]/i', $time)) {
$time = sprintf("%02d:00", $h0); // If time is invalid
}
echo "<table class='timepicker'>\n";
for ($row = 0; $row <= 3; $row++) {
echo "<tr>\n";
for ($col = 0; $col <= 3; $col++) {
$hour = sprintf("%02d", $h0 + 4 * $row + $col);
echo "<td>";
echo "<input type='radio' class='timepicker' id='time".$hour."' value='".$hour."' name='hour' ";
if (substr($time,0,2) == $hour) echo "checked";
echo "/>";
echo "<label for='time".$hour."' class='timepicker'>".$hour."</label>";
echo "</td>\n";<br />}
echo "<td style='width: 40px;'>&nbsp;</td>\n";
echo "<td>";
$minute = sprintf("%02d", 15 * $row);
echo "<input type='radio' class='timepicker' id='minute".$minute."' value='".$minute."' name='minute' ";
if (substr($time,3,2) == $minute) echo "checked";
echo "/>";
echo "<label for='minute".$minute."' class='timepicker'>".$minute."</label>";
echo "</td>\n";
echo "</tr>\n";
}
echo "</table>\n";
return;
}