Zeitfeld
Zeit präzise und einfach erfassen. Von der Terminplanung bis zur Schichtauswahl mit eleganten, integrierten Zeitauswahlfeldern, intelligenten Intervallen und flexibler Formatierung – das Zeitfeld bietet Validierung, Anpassungsmöglichkeiten und eine nahtlose Benutzererfahrung.
Intelligente Zeiterfassung mit integrierter Validierung
Perfekt für:
Leistungsstarke Funktionen für jeden Anwendungsfall
🕐 Flexible Zeitformate
24-Stunden- oder 12-Stunden-Anzeige
Wählen Sie das Format, das zu Ihrer Zielgruppe passt. Verwenden Sie für internationale Nutzer das 24-Stunden-Format (14:30 Uhr) oder für eine vertrautere Zielgruppe das 12-Stunden-Format mit AM/PM (2:30 Uhr).
Automatische Formatkonvertierung
Das Feld übernimmt die Formatkonvertierung automatisch – die Benutzer sehen ihr bevorzugtes Format, während Ihr System konsistente Daten empfängt.
Beispiele:
- Geschäftszeiten9:00 – 5:00 Uhr (12 Stunden)
- Internationaler Fahrplan09:00 – 17:00 Uhr (24 Stunden)
- Medizinische Termine14:30 Uhr (24-Stunden-Genauigkeit)
⏰ Intelligente Zeitintervalle
Präzision der Steuerungsauswahl
Legen Sie fest, wie detailliert die Zeitauswahl sein soll. Wählen Sie je nach Bedarf zwischen Minuten- und Stundenintervallen.
Verfügbare Intervalle:
- Jede Minute (12:00, 12:01, 12:02…) – Höchste Präzision
- Alle 5 Minuten (12:00, 12:05, 12:10…) – Standardtermine
- Alle 10 Minuten (12:00, 12:10, 12:20…) – Schnellbuchungen
- Alle 15 Minuten (12:00, 12:15, 12:30…) – Am häufigsten
- Alle 30 Minuten (12:00, 12:30, 1:00…) – Halbstunden-Slots
- Jede Stunde (12:00, 1:00, 2:00…) – Einfache Auswahl
Warum es wichtig ist:
Weniger Optionen bedeuten eine schnellere Auswahl. Passen Sie die Intervalle an Ihre Terminplanungsanforderungen an, um eine bessere Benutzererfahrung zu erzielen.
🎯 Zeitbereichsbeschränkungen
Früheste und späteste Uhrzeit einstellen
Beschränken Sie die verfügbaren Zeiten auf Geschäftszeiten, Veranstaltungspläne oder Betriebsfenster. Benutzer können keine Zeiten außerhalb des von Ihnen definierten Bereichs auswählen.
Intelligente Validierung
Die Validierung auf Browserebene verhindert ungültige Eingaben, bevor die Benutzer auf „Absenden“ klicken.
Anwendungsfälle:
- Öffnungszeiten: Nur von 9:00 bis 6:00 Uhr
- Abendveranstaltungen: Nur nach 5:00 Uhr
- Vormittagstermine: Nur vor 12:00 Uhr
- Nachtschicht: 10:00 Uhr – 6:00 Uhr
Beispiele:
- Restaurantreservierungen: Mindestens 11:00 Uhr, maximal 10:00 Uhr
- Sportunterricht: Mindestens 6:00 Uhr, maximal 9:00 Uhr
- Supportzeiten: Mindestens 8:00 Uhr, maximal 5:00 Uhr
🔧 Standardzeitoptionen
Drei sinnvolle Startwerte:
1. Leer (Kein Standardwert)
Die Benutzer beginnen mit einem leeren Feld – am besten geeignet, wenn die Zeitangabe immer eindeutig ist.
2. Aktuelle Uhrzeit
Wird beim Laden des Formulars automatisch mit der aktuellen Uhrzeit ausgefüllt – perfekt für Felder wie „Zeitpunkt des Vorfalls“ oder Zeitstempel.
3. Benutzerdefinierte Zeit
Wählen Sie im Voraus eine bestimmte Uhrzeit, z. B. „9:00 Uhr“, für vorgeschlagene Termine oder häufig gewählte Termine aus.
Wann ist was zu verwenden:
- Leer – Startzeiten der Veranstaltungen, persönliche Zeitpläne
- Aktuell – Zeitstempel der Meldungen, Check-in-Zeiten
- Benutzerdefiniert – Vorgeschlagene Besprechungszeiten, Standardzeiten
⚡ Sekundengenauigkeit (optional)
Bei Bedarf Sekunden hinzufügen
Aktivieren Sie das Sekundenfeld (HH:MM:SS) für eine präzise Zeiterfassung. Ideal für Zeitfahren, Stoppuhren und exakte Zeitstempel.
Formatbeispiele:
- Ohne Sekunden: 14:30 oder 2:30 Uhr
- Mit Sekunden: 14:30:45 oder 2:30:45 Uhr
Ideal für:
- Sportzeitmessung und Rennergebnisse
- Wissenschaftliche Experimente
- Präzise Protokollierungssysteme
- Zeitfahrmeldungen
🔀 Bedingte Logik
Dynamische Zeitfelder
Das Zeitfeld kann je nach anderen Formularwerten ein- oder ausgeblendet werden. Erstellen Sie intelligente Formulare, die sich an die Benutzereingaben anpassen.
Erweiterte Logikregeln:
- UND-Logik – Alle Bedingungen müssen erfüllt sein
- ODER-Logik – Jede Bedingung kann die Aktion auslösen
- 8 Operatoren – Gleich, Ungleich, Größer als, Kleiner als, Enthält, Ist leer und mehr
Anwendungsfälle:
- Die Option „Bevorzugte Anrufzeit“ wird nur angezeigt, wenn „Kontakt per Telefon“ ausgewählt ist.
- „Startzeit des Ereignisses“ anzeigen, wenn der Ereignistyp „Benutzerdefiniertes Ereignis“ entspricht.
- „Lieferzeit“ ausblenden, wenn die Versandart „Standardversand“ ist.
- „Besprechungszeit“ anzeigen, wenn die Besprechungsart „Persönlich“ entspricht.
🎨 Verbesserte Benutzererfahrung
Click-Anywhere-Aktivierung
Klicken Sie irgendwo in das Feld, um die native Zeitauswahl zu öffnen – größerer Zielbereich, bessere Bedienbarkeit.
Native Time Pickers
Nutzt den im Browser integrierten Zeitwähler mit vertrauten, plattformoptimierten Oberflächen (iOS-Rad, Android-Uhr, Desktop-Dropdown).
Mobil optimiert
Zeitauswahl per Touchscreen über native mobile Tastaturen und Auswahlfelder.
Zusatzfunktionen:
- Benutzerdefinierte CSS-Klassen für die Gestaltung
- Modus für versteckte Felder für Systemzeiten
- Unterstützung für Barrierefreiheit (ARIA-Labels)
- Löschtaste zum einfachen Zurücksetzen
- Validierung der erforderlichen Felder
- Platzhaltertextunterstützung
Einfache Einrichtung in 3 Schritten
Bereiten Sie Ihr Zeitfeld in wenigen Minuten vor.
Fügen Sie das Zeitfeld hinzu
Ziehen Sie das Feld „Zeit“ aus dem Abschnitt „Basisfelder“ per Drag & Drop in Ihr Formular.
Format und Intervalle konfigurieren
Wählen Sie zwischen 12-Stunden- und 24-Stunden-Format, legen Sie Zeitintervalle fest (alle 15 Minuten, 30 Minuten usw.) und fügen Sie optional minimale/maximale Zeitbeschränkungen hinzu.
Standardzeit festlegen
Wählen Sie, ob das Feld leer, mit der aktuellen Zeit oder mit einer von Ihnen festgelegten benutzerdefinierten Zeit angezeigt werden soll. Aktivieren Sie die Sekundenanzeige, wenn Sie eine präzise Zeitangabe benötigen.
:-) Das war's! Ihr Zeitfeld ist nun mit intelligenter Formatierung und Validierung bereit.
Anwendungen aus der realen Welt
Service & Reservierungen
* Fahrzeugwartungszeiten
* Besichtigungstermine für Immobilien
* Buchungszeiten für Touren
* Reservierungsfenster für die Einrichtung
Kurs- und Aktivitätsbuchung
* Zeiten für Fitnesskurse
* Trainingsterminplanung
* Zeitfenster für Gruppenaktivitäten
* Unterrichtszeitenpräferenzen
Geschäftsbetrieb
* Schichtbeginn-/Schichtendezeiten
* Einreichungen zum Arbeitsplan
* Koordination von Besprechungszeiten
* Auswahl der Verfügbarkeitszeit
Terminreservierung
* Terminvereinbarung für medizinische Leistungen
* Salon- und Spa-Buchungen
* Auswahl des Beratungstermins
* Service-Terminanfragen
Veranstaltungsanmeldung
* Veranstaltungsbeginn-/Endzeiten
* Sitzungszeitpräferenzen
* Workshop-Zeitfenster
* Auswahl des Konferenzprogramms
Lieferung und Abholung
* Zeitfenster für die Essenslieferung
* Abholzeiten im Geschäft
* Terminvereinbarung für die Abholung am Straßenrand
* Bevorzugte Lieferzeiten
Feldoptionen ausfüllen
Grundlegende Einstellung
- Feldbezeichnung – Der Titel, der über dem Zeitfeld angezeigt wird
- Beschreibung/Hilfetext – Zusätzliche Hinweise für Benutzer
- Pflichtfeld – Zeitauswahl als Pflichtfeld festlegen
- Platzhaltertext – Hinweistext, bevor Benutzer eine Uhrzeit auswählen
Zeitformateinstellungen
- Display-Format
- 24-Stunden-Uhr (14:30)
- 12-Stunden-Uhr mit AM/PM (2:30 Uhr)
Präzision & Intervalle
- Zeitintervalle
- Jede Minute
- Alle 5 Minuten
- Alle 10 Minuten
- Alle 15 Minuten (am beliebtesten)
- Alle 30 Minuten
- Jede Stunde
Sekunden anzeigen – Sekundenfeld für präzise Zeitangabe hinzufügen (HH:MM:SS)
Zeitliche Einschränkungen
- Frühestmögliche Zeit (Min.) – Benutzer können keine Zeiten vor diesem Zeitpunkt auswählen.
- Spätestmögliche Zeit (Maximal) – Nach diesem Zeitpunkt können keine Zeiten mehr ausgewählt werden.
Standardwerte
- Auswahl der Startzeit
- Keine vorausgewählte Zeit (leer)
- Aktuelle Zeit (dynamisch – wird beim Öffnen des Formulars geladen)
- Benutzerdefinierte Zeit (von Ihnen festgelegte Uhrzeit)
Benutzerdefinierte Startzeit – Wählen Sie die gewünschte Startzeit aus (wenn „Benutzerdefiniert“ ausgewählt ist).
Bedingte Logik
- Bedingte Logik aktivieren – Ein-/Ausblenden basierend auf Bedingungen
- Logiktyp
- Alle Bedingungen müssen erfüllt sein (UND)
- Jede Bedingung kann erfüllt sein (ODER)
- Bedingungsregeln
- Anzeigen/Ausblenden – Zu ergreifende Maßnahmen
- Feld – Welches Feld soll geprüft werden?
- Operator – Gleich, Ungleich, Enthält, Größer als, Kleiner als, Ist leer, Ist nicht leer
- Wert – Vergleichswert
- Mehrere Bedingungen – Unbegrenzt viele Regeln hinzufügen
Erweiterte Optionen
- Modus „Verstecktes Feld“ – Als verstecktes Feld mit voreingestelltem Wert verwenden
- Benutzerdefinierte CSS-Klassen – Benutzerdefiniertes Styling anwenden
- Barrierefreiheitsattribute – ARIA-Labels und -Beschreibungen
Warum sollten Sie sich für unser Zeitfeld entscheiden?
✅ Intuitiv – Native Browser-Auswahlfelder bieten vertraute Benutzererfahrungen
✅ Flexibel – 12- oder 24-Stunden-Formate entsprechen den Nutzerpräferenzen.
✅ Präzise – Individuelle Intervalle von jeder Minute bis zu jeder Stunde
✅ Intelligent – Min-/Max-Beschränkungen verhindern ungültige Zeitauswahlen
✅ Dynamisch – Bedingte Logik erzeugt adaptive Formen
✅ Benutzerfreundlich – Aktivierung per Klick von überall für eine bessere Benutzererfahrung
✅ Mobiloptimiert – Benutzerfreundliche native Zeitauswahl für Touchscreens
✅ Vollständig integriert – Funktioniert nahtlos mit allen Formularfunktionen
Häufig gestellte Fragen
F: Worin besteht der Unterschied zwischen dem 12-Stunden- und dem 24-Stunden-Format?
Das 12-Stunden-Format zeigt Uhrzeiten mit AM/PM an, z. B. 14:30 Uhr. Das 24-Stunden-Format verwendet Uhrzeiten wie 2:30 und ist international üblich.
F: Wie funktionieren Zeitintervalle?
Die Intervalle legen fest, wie detailliert die Zeitangaben sind. Beispielsweise werden bei einem 15-Minuten-Intervall 9:00, 9:15, 9:30 usw. angezeigt.
F: Kann ich die Zeiten auf die Geschäftszeiten beschränken?
Ja. Legen Sie die früheste und späteste Uhrzeit fest, zum Beispiel 9:00 Uhr bis 5:00 Uhr, und die Benutzer können nur innerhalb dieses Zeitraums auswählen.
F: Was bedeutet die Standardeinstellung „Aktuelle Zeit“?
Wenn diese Option aktiviert ist, wird das Feld beim Laden des Formulars automatisch mit der aktuellen Uhrzeit des Benutzers ausgefüllt.
F: Benötige ich das Feld für Sekunden?
Normalerweise nicht. Aktivieren Sie diese Funktion nur, wenn Sie eine präzise Zeitangabe benötigen, z. B. für Einträge im Format HH:MM:SS bei Ereignissen oder technischen Daten.
F: Wie funktioniert die Zeitauswahl auf Mobilgeräten?
Jedes Gerät verwendet seine eigene Benutzeroberfläche. iOS verwendet typischerweise ein Auswahlrad, während Android eine Auswahlhilfe im Uhrenstil verwendet.
F: Kann ich bedingte Logik mit Zeitfeldern verwenden?
Ja. Sie können Felder basierend auf ausgewählten Zeitpunkten mithilfe von Bedingungen wie „Gleich“, „Größer als“ oder „Kleiner als“ ein- oder ausblenden.
F: Was passiert, wenn Benutzer versuchen, ungültige Zeiten auszuwählen?
Zeiten außerhalb des zulässigen Bereichs werden von der Browservalidierung blockiert und können nicht ausgewählt werden.
F: Kann ich eine bestimmte Uhrzeit vorab eingeben?
Ja. Wählen Sie „Benutzerdefiniert“ als Standardzeit und wählen Sie einen beliebigen Wert aus, der vorab geladen werden soll.
F: Funktioniert das Zeitfeld in allen Browsern?
Alle modernen Browser unterstützen HTML5-Zeiteingabefelder mit integrierten Auswahllisten. Ältere Browser verwenden stattdessen Texteingabefelder mit Validierung.
F: Kann ich das Zeitfeld an das Design meiner Website anpassen?
Ja. Der Picker verwendet die native Benutzeroberfläche, aber das Eingabefeld kann mit CSS-Klassen gestaltet werden.
F: In welchem Format wird die Zeitangabe übermittelt?
Zeitwerte werden stets im 24-Stunden-Format übermittelt, um eine konsistente Datenverarbeitung zu gewährleisten.
