Das leidige Thema Datepicker

Ein Datepicker findet sich heute in vielen Applikationen, dennoch zeigen sich bei der Anwendung immer wieder Probleme. sum.cumo hat ein Fork des Projekts vue.js-datepicker entwickelt, welches bereits viele Features enthält, die sich einfach erweitern lassen.

Probleme mit dem nativen Datepicker

Kalendersteuerelemente werden immer wieder benötigt und sind wesentlicher Bestandteil der Frontend-Entwicklung. Als problematisch erweist sich, dass der hierbei oftmals verwendete native Datepicker unterschiedlich aussieht, anders funktioniert und die API nicht vereinheitlicht ist. Zudem leidet die Benutzerfreundlichkeit, da das Datum nicht manuell eingetippt werden kann. Viele der vorhandenen Datepicker-Komponenten für Vue sind veraltet, werden nicht mehr gewartet oder es fehlt schlicht an grundsätzlichen Features.

Ein Fork des vuejs-datepickers als eine Lösung von sum.cumo

sum.cumo hat sich dem Problem angenommen und sich auf die Suche nach einer Lösung begeben mit dem Ziel diese unternehmensweit in unseren Projekten einsetzen zu können. Wir sind dabei auf einen unter MIT-Lizenz verfügbaren vuejs-datepicker gestoßen, welcher bereits viele Features enthält, die sich einfach erweitern lassen. Hierbei hat sich allerdings herausgestellt, dass eine langfristige Arbeit mit dem Datepicker nicht zum gewünschten Ergebnis führen wird, da das letzte Release ca. 1,5 Jahre alt ist und auf unsere und andere Pull Requests nur selten reagiert wird. Auch eine engere Zusammenarbeit mit dem Projekthersteller war nicht möglich, so dass wir uns entschlossen haben einen Fork zu erstellen und diesen auf GitHub weiter zu entwickeln.

Das bietet der Datepicker:

• direkte Tastatureingabe
• Internationalisierung
• inline Kalender
• Daten können deaktiviert und Termine hervorgehoben werden
• automatische Ausrichtung
• Kompatibilität mit Bootstrap
• benutzerdefinierte Slots
• dependency-free

Formatierung

Die integrierte Datumsformatierung ist grundsätzlich vollkommen ausreichend. Sollte diese jedoch nicht genügen, kann sie einfach mit date-fns oder moment.js erweitert werden. Das Template des Datepickers lässt sich an vielen weiteren Stellen anpassen oder modifizieren, sodass individuellen Wünschen und Vorstellungen nichts im Wege steht.

Für eine Formatierung während der Eingabe empfehlen wir Cleave.js. Schaut euch dafür gerne das Beispiel in unserer Dokumentation an.

Internationalisierung

Es stehen derzeit 48 Sprachen zur Verfügung. Die Verwendung der gewünschten Sprache wird mittels Tree Shaking optimiert.

Validierung

Formvalidierung ist ein wichtiges Thema. Wie vee-velidate 2.x.x richtig genutzt wird, zeigt sich anhand eines Beispiels in unserer Dokumentation.

Fazit

Zusammenfassend haben wir einen schlanken und flexiblen Datepicker erstellt, der viele Features beinhaltet und genug Spielraum für individuelle Gestaltung und Anpassungen lässt.

Testet unseren vue-datepicker ganz einfach auf unserer Demo Seite.
Wir freuen uns auf euer Feedback, gerne als Issue!

Mehr zum Thema Frontend bei sum.cumo findet ihr hier.