Input : Datum

Mit dem JSAction Framework kann man sehr einfach ein HTML Input Element mit einer JavaScript Datumsprüfung verbinden. Dazu kodiert man lediglich eine bestimmte CSS Klasse im HTML Code und schon wird automatisch eine Realtime Prüfung für das Input Element registiert. Der Code bleibt dabei absolut valide.

HTML Code

Die CSS Klasse date kennzeichnet ein Input Element als Datumsfeld. Zusätzlich kann man mit required festlegen ob das Element ein Pflichtfeld sein soll.

<input type="text" name="date1" class="date" /> <input type="text" name="date2" class="date required" />

Beispiel

Die folgenden Felder prüfen die Eingabe in Realtime bei Tastendruck (onkeyup) und beim Verlassen (onblur). Die Eingabe kann mit oder ohne Trennzeichen durchgeführt werden, im zweiten Fall wird das Datum beim Verlassen des Eingabefeldes automatisch formatiert.

Datum 1: Datum 2: (required)

CSS

Das Erscheinungsbild der Eingabefelder definiert man global über CSS Selektoren.

.date { width:80px } .required { background-color:rgb(255,255,174) }

Attribute

Für internationale Anwendungen kann man das Datumsformat länderspezifisch setzen. Sowohl die Anordnung der Tage, Monate und Jahre, als auch das Datumstrennzeichen sind dabei frei wählbar. Die Fehlermeldung ist ebenfalls individuell in der passenden Sprache änderbar.

HpResource.datePattern = 'dd.MM.yyyy'; HpResource.dateSeparator = '.'; HpResource.errorDate = 'Kein gültiges Datum!';

Formate

Das Standard Datumsformat kann man auch ganz einfach mit einem individuellen Format für ein spezielles Eingabefeld überschreiben.

class="date dd" (nur der Tag) class="date MM" (nur der Monat) class="date yyyy" (nur das Jahr) class="date ddMM" (Tag und Monat) class="date MMyyyy" (Monat und Jahr)

Johannes Hammoud Input : Datum 04.11.2009

I Coding : Community über Java Programmierung

Sprache Englisch+-

Java JSF JavaScript HTML CSS NetBeans GlassFish MySQL

Impressum

Besuche
5744538
Heute
107