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-Plug­ins ver­ein­facht wer­den. Ich nut­ze ein Plug­in, 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 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.

    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. Erforderliche Felder sind mit * markiert