Uhr­zeit mit zwei Klicks eingeben

19:00 Uhr, ganz einfach…

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 Uhrzeit.

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

Für die Ein­ga­be von Uhr­zei­ten habe ich kein pas­sen­des Plugin gefun­den. Die meis­ten Plugins nut­zen Frame­works wie jQue­ry oder Boot­strap. Allen Plugins gemein­sam: Man muss viel scrol­len um die pas­sen­de Uhr­zeit einzugeben.

19:30 Uhr, auch ganz einfach

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 Zahleneingabe…

 

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)) {
		// Invalid format!
		$time = sprintf("%02d:00", $h0);
	}
	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";
		}
		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;
}

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.