PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Datumseingabefeld (kein Datepicker) gesucht


Shink
2009-02-19, 08:38:48
Hallo,

ich suche einen Möglichkeit den Besucher einer Seite seinen Geburtstag komfortabel eingeben zu lassen. Ein Datepicker fällt klarerweise flach da man sich da durch sehr viele Jahre durchklicken müsste.
In Clientanwendungen sieht man oft ein Feld in der Form "__.__.____". hier kann der Benutzer Tag, Monat und Jahr eingeben - mit Punkt, dann weiß die Anwendung dass sie ins nächste Feld springen muss oder ohne Punkt, dann wird nach spätestens 2 Feldern gewechselt. Hab ich aber als HTML- oder Javascript-Lösung noch nirgends gesehen. Ist da jemandem etwas bekannt? (Java Applet gilt natürlich nicht:P)

rotalever
2009-02-19, 12:41:26
Naja, du könntest drei <input>-Felder nebeneinander machen. Mit Javascript kann man ja leicht feststellen, wenn sich der inhalt eines solchen Feldes ändert, man könnte dann automatisch zum nächsten springen. Aber ich glaube, dass das unnötig ist. Die meisten Benutzer kennen die TAB-Taste. Also am besten schauen, dass du den tabindex richtig setzt.

Shink
2009-02-19, 14:26:22
Mit Javascript kann man ja leicht feststellen, wenn sich der inhalt eines solchen Feldes ändert, man könnte dann automatisch zum nächsten springen.
Ja, das klingt eigentlich vernünftig. Sieht vielleicht nicht so aus wie erwartet, sollte aber den Zweck erfüllen.

rotalever
2009-02-19, 15:43:32
Ja, das klingt eigentlich vernünftig. Sieht vielleicht nicht so aus wie erwartet, sollte aber den Zweck erfüllen.
Das Aussehen kann man ja beliebig mit CSS verändern.

Ich persönlich würde, wenn ich dieses automatische Weiterschalten mit Javascript mache, die 3 Eingabefelder mit CSS so designen, dass sie wie 1 aussehen. Sonst verwirrt das.

edit: Wobei das dann natürlich wieder verwirren würde, wenn jemand kein Javascript aktiviert hat. Vielleicht ist es doch besser das ganze ohne automatisches weiterschalten zu realisieren?

DanMan
2009-02-19, 18:27:30
Stimme rotalever zu.

So wie du es geschildert hast Shink wär es aber auch kein Problem mit JS. Entweder du springst zum nächsten Input Feld, sobald es voll is (also 2 Zeichen beim Tag z.B.), oder du reagierst darauf, dass der Benutzer die Punkt-Taste gedrückt hat.

uxcite-johannes
2013-02-10, 21:46:39
Ich denke das Einfachste für deine User und dich dürfte ein einfaches Textfeld sein, mit einem Hinweis, wie das Geburtsdatum eingegeben wird (Format TT.MM.JJJJ).

Damit entfällt das lästige Umschalten zwischen den Feldern, und deine Besucher können Ihren Geburtstag so eintippen, wie sie es tausendfach gelernt haben.

Wir haben auf uxcite.de erst die Usability verschiedener Eingabemethoden für Geburtstage verglichen, eventuell hilft das weiter:

http://www.uxcite.de/web/eingabefelder-fuer-geburtsdaten/

RattuS
2013-02-21, 01:12:29
Ich denke das Einfachste für deine User und dich dürfte ein einfaches Textfeld sein, mit einem Hinweis, wie das Geburtsdatum eingegeben wird (Format TT.MM.JJJJ).
Fixed. Einfach die Eingabe intelligent parsen.

Typische Eingaben, die nicht DDMMYYYY entsprechen:
- das Jahrhundert ist ausgelassen, z.B. 24.12.60
(x = 60, hier einfach 1900 + x mutmaßen, wenn x größer als aktuelles Jahr - 2000 ist)
- keine auffüllenden Nullen, z.B. 1.1.70
(hier einfach mit einem regulären Ausdruck die Gruppen trennen und später ggf. mit Nullen auffüllen)
- Monatsnamen werden abgekürzt bzw. ausgeschrieben, z.B. 1. Jan(uar) '12
(und auch hier hilft ein regulärer Ausdruck)
- das Jahr wird ganz weggelassen (bei Geburtsdaten irrelevant bzw. ein Fehlerfall, aber gerade bei Kalendar/Termin-Eingaben ist hier einfach das aktuelle Jahr einzusetzen)

- dazu grundsätzlich alle Zeichen außer [0-9 ,./-] wegschmeißen und in den regulären Ausdrücken die oben erwähnten Trennzeichen [,./-] akzeptieren
- die einzige Problematik besteht in wenigen Fällen beim US-Format MMDDYYYY, wo Tag und Monat unter Umständen nicht unterschieden werden kann
(hier hilft leider nur die Festlegung einer bevorzugten Lokale oder mit Glück das Unterscheiden von x > 12)

Ich verwende diese Technik (in ausgereifterer Form als hier beschrieben) seit geraumer Zeit und habe damit sehr viel Gesichter zum Lächeln gebracht. :)

Falls man den Benutzer in seinem klassischen Denken stützen möchte, kann man natürlich nach wie vor kompatible Formate vorschlagen. Hierbei hilft der placeholder-Attribut des input-Tag (klappt allerdings nicht beim IE).