Javascript Framework: heute Datejs +

Einen Datumsparser in Javascript zu schreiben, gehört nicht zu den schönsten Tätigkeiten. Was liegt also näher, als in den verwendeten Frameworks danach zu suchen:

• Prototype, Fehlanzeige zu lowlevel
• YUI zu sehr widget-like, zwar ein guter Kalender vorhanden, aber kein Date-Parser
• DWR ist für die AJAX-Kommunikation zuständig und hat nur bei der Konvertierung von einem Javascript-Date zu java.sql.Timestamp, java.util.Date, … seine Verwendung

Also auf die Suche was es passendes gibt. Vor Monaten mal einen Schnipsel gefunden, der das Tat was er sollte: ein vorgegebenes Datumsformat parsen. Dank regelmäßigen News von ajaxian.com stieß ich dann auf Datejs, einer verdammt sexy Date-Library.

Persönlich nutze ich Todoist für die Verwaltung meiner ToDos. Todoist verwendet eine eigene Date-Library, dessen Verwendung mich überzeugt hat. Wer kennt schon das Datum des nächsten Samstags beim Eintrag eines Todos? Was liegt also näher als sat oder saturday einzugeben. Noch schnell was für heute eintragen: today oder morgen: tom. Oder in 10 Tagen +10. Gerade wenn ein Datum schnell ausgewählt werden muss und im Umkreis von wenigen Tagen liegt, geht nichts über diese Syntax.

An diesem Punkt wird Datejs interessant. Es ist eine Javascript-Library für genau diesen Zweck: Date sugar. In unserem Produkt haben wir es sehr häufig mit Datumseingabefeldern zu tun und eben diese mussten optimiert werden. Ein Datum kann einfach über einen Popup-Kalender ausgewählt werden, aber wie setzt man einen Timestamp, also Datum und Uhrzeit um? Popup und Select-Boxen? Also eine Select-Box mit 60 Einträgen für die Minuten? Geht gar nicht, also in 5min Schritten. Was ist passiert? Man kam nicht mehr an alle Einträge, da innerhalb von 5min in den Logs zuviel passiert. Also Popup-Kalender und Texteingabefeld. Leider ist die Uhrzeit wieder zu internationalisieren, also ein Zeit-Parser muss her. Die Bedienung dabei erfordert einmal die Maus für den Popup-Kalender und einmal die Tastatur für die Uhrzeit. Nicht sehr optimal.

Wie kann man es aber besser machen? Man setzt einfach Datejs ein und bietet dem Benutzer beim Spiel mit der Library möglichst viel Unterstützung. Wir haben ein Texteingabefeld, welches Datum und Uhrzeit aufnimmt. Daneben gibt es noch ein Icon für den YUI-Popup-Kalender und dahinter gibt es ein Label, welches direkt das ausgewählte Datum anzeigt. Dank Javascript wird dies direkt bei der Eingabe mit Datejs geparst und entsprechend übersetzt. Würden wir erst serverseitig die Syntax analysieren, wäre für den Benutzer kein direktes Feedback seiner Eingabe da und die Lösung würde nicht so gut funktionieren. Natürlich ist Datejs internationalisiert, was zwar teilweise noch im Anfangsstadium ist, aber schon recht gut funktioniert (und auch selber erweitert werden kann).

Welche Möglichkeiten eröffnet uns dies?

• today: das heutige Datum
• tod @ 15:00: heute um 15:00 Uhr
• next sat: nächsten Samstag
• +5: in 5 Tagen
• last April: letzten April
• sep: 1. September 2008
• 17 sept, 8:00: Wednesday, September 17, 2008 8:00:00
• 01.01.2009 22:35: 01.01.2009 22:35 (wie erwartet je nach Locale)

Somit ergibt sich für unser Frontend Ostium folgendes Input-Element für Datumseingaben:

Live-Beispiel von Datejs: http://www.datejs.com/

Zum Starten: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Für die aktuellen Sourcen (empfohlen): http://www.datejs.com/googlecode/