Zum Inhalt springen

Uhr­zeit mit zwei Klicks ein­ge­ben

19:00 Uhr, ganz ein­fach…

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-Plugins ver­ein­facht wer­den. Ich nut­ze ein Plugin, wel­ches ohne zusätz­li­chem Frame­work aus­kommt:

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 ein­zu­ge­ben.

19:30 Uhr, auch ganz ein­fach

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”):

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.