Benutzerdefinierte Zeiteingabefelder mit jQuery Timedropper

Einige Web-Formulare erfordern datumsbasierte Eingaben und Datumsauswahl-Plugins können dabei helfen. Aber was ist mit Zeiteingaben ?

Mit dem kostenlosen jQuery-Plugin Timedropper können Sie benutzerdefinierte Zeitauswahlfunktionen hinzufügen, um Termine festzulegen, Telefonanrufe zu planen oder so ziemlich alles, was Sie brauchen.

Es ist unglaublich einfach und Sie brauchen nur die jQuery-Bibliothek, um loszulegen. Sobald Sie diese Bibliothek installiert haben, können Sie die Timedropper JS / CSS-Dateien hinzufügen und ausführen lassen. Das ist es!

Jedes Eingabefeld muss von einem jQuery-Selektor angesteuert werden, der dann das Timedropper-Eingabefeld hinzufügt. Dies hat Optionen, die Sie mit zusätzlichen (optionalen) Funktionen hinzufügen können:

• Autoswitch - ändert automatisch die Stunde / Minute beim Aufsetzen
• Meridiane - Stellen Sie eine 12-Stunden-Uhr anstelle einer 24-Stunden-Uhr ein
• Format - legt fest, wie die Stunden und Minuten angezeigt werden (Standardformat ist 1:22 Uhr)
• Mausrad - ermöglicht die Änderung der Zeit basierend auf dem Scrollrad
• Init_animation - Aktiviert die verblassenden Animationseffekte
• setCurrentTime - Fügt dem Feldwert automatisch die aktuelle Uhrzeit hinzu

Wenn Sie noch wagemutiger sind, können Sie den Stil mit ein paar vorgepackten Designs ändern oder sogar Ihr eigenes erstellen.

In einem Meer von jQuery Plugins ist Timedropper die Knie der Biene. Es bietet wirklich eine einzigartige Schnittstelle für jede App, um eine Zeit unabhängig vom Gerät auszuwählen.

Natürlich reagiert es auf Mobilgeräte und funktioniert auch auf Smartphones und Tablets. Ich mag jedoch nicht die fehlende Unterstützung von Nummernfeldern . Das scheint der offensichtliche Weg zu sein, eine Zeit zu betreten, also kann es ohne dieses Merkmal einschränkend wirken.

Dennoch empfehle ich Timedropper für eine einzigartige Schnittstelle und ein einfaches Setup für jeden, der es ausprobieren möchte.

Sie können den gesamten Quellcode auf GitHub kostenlos finden und Sie werden eine unglaublich einfache Demo in diesem Stift finden, die unten eingebettet ist.

Wenn Sie irgendwelche anderen Gedanken oder Vorschläge haben, können Sie gerne mit dem Entwickler auf Twitter @felice_gattuso teilen.