Camp de temps
Recopila el temps amb precisió i facilitat. Des de la programació de cites fins a la selecció de torns amb elegants selectors de temps natius, intervals intel·ligents i format flexible, el camp Temps proporciona validació, personalització i una experiència d'usuari fluida.
Recollida intel·ligent de temps amb validació integrada
Perfecte per:
Funcions potents per a cada cas d'ús
🕐 Formats de temps flexibles
Pantalla de 24 hores o 12 hores
Trieu el format que s'adapti al vostre públic. Feu servir el format militar de 24 hores (14:30) per a usuaris internacionals o el de 12 hores amb AM/PM (2:30 PM) per familiaritzar-vos.
Conversió de format automàtic
El camp gestiona la conversió de format automàticament: els usuaris veuen el seu format preferit mentre el sistema rep dades coherents.
Exemples:
- hores d'oficina9:00 AM – 5:00 PM (12 hores)
- Programació internacional09:00 – 17:00 (24 hores)
- Cites mèdiques: 14:30 (precisió de 24 hores)
⏰ Intervals de temps intel·ligents
Precisió de selecció de control
Defineix com de granular ha de ser la selecció de temps. Tria entre intervals de cada minut i intervals d'una hora segons les teves necessitats.
Intervals disponibles:
- Cada minut (12:00, 12:01, 12:02…) – Màxima precisió
- Cada 5 minuts (12:00, 12:05, 12:10…) – Cites estàndard
- Cada 10 minuts (12:00, 12:10, 12:20…) – Reserves ràpides
- Cada 15 minuts (12:00, 12:15, 12:30…) – El més comú
- Cada 30 minuts (12:00, 12:30, 1:00…) – Franges de mitja hora
- Cada hora (12:00, 1:00, 2:00…) – Selecció senzilla
Per què és important:
Menys opcions = selecció més ràpida. Adapta els intervals a les teves necessitats de programació per a una millor experiència d'usuari.
🎯 Restriccions de rang horari
Estableix els temps més primerencs i més tardans
Limiteu els horaris disponibles perquè coincideixin amb l'horari comercial, els horaris d'esdeveniments o les finestres operatives. Els usuaris no poden seleccionar horaris fora del rang definit.
Validació intel·ligent
La validació a nivell de navegador evita els enviaments no vàlids abans que els usuaris facin clic a Envia.
Casos d'ús:
- Horari comercial: només de 9:00 a 6:00
- Esdeveniments nocturns: Només després de les 5:00
- Franges de matí: Només abans de les 12:00 h
- Torn de nit: 10:00 – 6:00
Exemples:
- Reserves al restaurant: Mínim 11:00, Màxim 10:00
- Classes de gimnàstica: Mínim 6:00, Màxim 9:00
- Horari d'atenció: Mínim 8:00 AM, Màxim 5:00 PM
🔧 Opcions de temps predeterminades
Tres valors inicials intel·ligents:
1. En blanc (sense valor per defecte)
Els usuaris comencen amb un camp buit; és millor quan el temps sempre és únic.
2. Hora actual
S'emplena automàticament amb l'hora actual quan es carrega el formulari: perfecte per a camps de "hora de l'incident" o de marca de temps.
3. Hora personalitzada
Preseleccioneu una hora específica com ara "9:00 AM" per a suggeriments d'horaris de cites o seleccions habituals.
Quan s'ha d'utilitzar cadascun:
- En blanc: hores d'inici dels esdeveniments, horaris personals
- Actual: marques de temps i hores d'entrada dels informes
- Personalitzat: horaris de reunió suggerits, horaris predeterminats
⚡ Precisió de segons (opcional)
Afegiu segons quan calgui
Activa el camp de segons (HH:MM:SS) per a un seguiment precís del temps. Perfecte per a proves de temps, cronòmetres i marques de temps exactes.
Exemples de format:
- Sense segons: 14:30 o 2:30
- Amb segons: 14:30:45 o 2:30:45
Ideal per a:
- Cronometratge esportiu i resultats de curses
- experiments científics
- Sistemes de registre precisos
- Presentacions a contrarellotge
🔀 Lògica condicional
Camps de temps dinàmics
Mostra o amaga el camp de temps en funció d'altres valors del formulari. Crea formularis intel·ligents que s'adaptin a l'entrada de l'usuari.
Regles de lògica avançada:
- Lògica I: s'han de complir totes les condicions
- Lògica O: qualsevol condició pot desencadenar l'acció
- 8 operadors: Igual a, No igual a, Més gran que, Més petit que, Conté, És buit i més
Casos d'ús:
- Mostra "Hora de trucada preferida" només quan "Contacte per telèfon" està seleccionat
- Mostra l'"Hora d'inici de l'esdeveniment" quan el tipus d'esdeveniment és igual a "Esdeveniment personalitzat"
- Amaga el "Temps de lliurament" quan el mètode de lliurament és "Enviament estàndard"
- Mostra "Hora de reunió" quan el tipus de reunió sigui igual a "Presencial"
🎨 Experiència d'usuari millorada
Activació amb clic a qualsevol lloc
Feu clic a qualsevol lloc del camp per obrir el selector de temps natiu: una àrea de destinació més gran, millor usabilitat.
Selectors de temps nadius
Utilitza el selector de temps integrat del navegador amb interfícies familiars i optimitzades per a la plataforma (roda d'iOS, rellotge d'Android, menú desplegable d'escriptori).
Optimitzat per a mòbils
Selecció de temps tàctil amb teclats i selectors natius per a mòbils.
Característiques addicionals:
- Classes CSS personalitzades per a estils
- Mode de camp ocult per a les hores del sistema
- Suport d'accessibilitat (etiquetes ARIA)
- Botó transparent per a un fàcil restabliment
- Validació de camps obligatoris
- Suport de text amb marcador de posició
Configuració senzilla en 3 passos
Prepara el teu camp de temps en minuts
Afegiu el camp de temps
Arrossegueu i deixeu anar el camp Hora de la secció Camps bàsics al formulari.
Configura el format i els intervals
Trieu el format de 12 hores o 24 hores, definiu intervals de temps (cada 15 minuts, 30 minuts, etc.) i, opcionalment, afegiu restriccions de temps mínimes/màximes.
Estableix l'hora predeterminada
Trieu si el camp comença en blanc, amb l'hora actual o una hora personalitzada que especifiqueu. Habiliteu els segons si necessiteu un temps precís.
🎉 Això és tot! El camp de temps està a punt amb formatació i validació intel·ligents.
Aplicacions del món real
Servei i reserves
* Horaris de servei del vehicle
* Horaris de visites a la propietat
* Horaris de reserva de visites turístiques
* Franges horàries de reserva d'instal·lacions
Reserva de classes i activitats
* Horaris de les classes de fitness
* Programació de sessions de formació
* Franges horàries per a activitats en grup
* Preferències horàries de classe
Operacions de Negocis
* Horaris d'inici/finalització del torn
* Presentació de l'horari de treball
* Coordinació del temps de reunió
* Selecció de temps de disponibilitat
Reserva de Cites
* Programació de cites mèdiques
* Reserves de salons de bellesa i spa
* Selecció de l'hora de la consulta
* Sol·licituds de cita prèvia
Registre d'esdeveniments
* Horaris d'inici/finalització de l'esdeveniment
* Preferències de temps de sessió
* Franges horàries dels tallers
* Selecció de l'horari de la conferència
Lliurament i recollida
* Finestres horàries de lliurament de menjar
* Horaris de recollida a la botiga
* Programació de recollida a la vorera
* Preferències de franja horària de lliurament *
Opcions de camp completes
Configuració bàsica
- Etiqueta del camp: el títol que es mostra a sobre del camp de temps
- Descripció/Text d'ajuda: guia addicional per als usuaris
- Camp obligatori: fes que la selecció de l'hora sigui obligatòria
- Text de marcador de posició: text de pista abans que els usuaris seleccionin una hora
Configuració del format de temps
- Format de visualització
- Rellotge de 24 hores (14:30)
- Rellotge de 12 hores amb AM/PM (2:30)
Precisió i intervals
- Intervals de temps
- Cada minut
- Cada 5 minuts
- Cada 10 minuts
- Cada 15 minuts (el més popular)
- Cada 30 minuts
- Cada hora
Mostra els segons: afegeix un camp de segons per a l'hora precisa (HH:MM:SS)
Restriccions de temps
- Temps més primerenc permès (mínim): els usuaris no poden seleccionar temps anteriors a aquest
- Últim temps permès (màxim): els usuaris no poden seleccionar hores posteriors a aquest
Valors predeterminats
- Selecció de l'hora d'inici
- Sense hora preseleccionada (en blanc)
- Hora actual (dinàmica: es carrega quan s'obre el formulari)
- Hora personalitzada (hora específica que definiu)
Hora d'inici personalitzada: seleccioneu l'hora específica per omplir prèviament (quan s'ha seleccionat "Personalitzada")
Lògica condicional
- Habilita la lògica condicional: mostra/amaga segons les condicions
- Tipus lògic
- Cal complir totes les condicions (I)
- Es pot complir qualsevol condició (O)
- Regles de condició
- Mostra/Amaga: Acció a realitzar
- Camp: quin camp cal comprovar
- Operador – Igual a, No és igual a, Conté, Més gran que, Menor que, És buit, No és buit
- Valor – Valor de comparació
- Condicions múltiples: afegeix regles il·limitades
Opcions avançades
- Mode de camp ocult: s'utilitza com a camp ocult amb un valor preestablert
- Classes CSS personalitzades: aplica estils personalitzats
- Atributs d'accessibilitat: etiquetes i descripcions ARIA
Per què escollir el nostre camp de temps?
✅ Intuïtiu: els selectors nadius del navegador proporcionen experiències familiars
✅ Flexible: els formats de 12 o 24 hores s'adapten a les preferències de l'usuari
✅ Precisió: intervals personalitzats des de cada minut fins a cada hora
✅ Intel·ligent: les restriccions mínimes/màximes eviten seleccions de temps no vàlides
✅ Dinàmic: la lògica condicional crea formularis adaptatius
✅ Fàcil d'usar: activació amb un clic a qualsevol lloc per a una millor experiència d'usuari
✅ Optimitzat per a mòbils: selectors de temps nadius compatibles amb el tacte
✅ Totalment integrat: funciona perfectament amb totes les funcions del formulari
Preguntes freqüents
P: Quina diferència hi ha entre el format de 12 hores i el de 24 hores?
El format de 12 hores mostra les hores amb AM/PM, com ara les 14:30. El format de 24 hores utilitza hores com ara les 2:30 i és comú internacionalment.
P: Com funcionen els intervals de temps?
Els intervals defineixen el nivell de detall de les opcions de temps. Per exemple, un interval de 15 minuts mostra les 9:00, les 9:15, les 9:30, etc.
P: Puc restringir els horaris només a l'horari comercial?
Sí. Establiu les hores més primerenques i més tardanes, com ara de 9:00 a 5:00, i els usuaris només podran triar dins d'aquest interval.
P: Què significa l'opció per defecte "Hora actual"?
Quan està habilitat, el camp s'emplena automàticament amb l'hora actual de l'usuari quan es carrega el formulari.
P: Necessito el camp de segons?
Normalment no. Activeu-ho només quan necessiteu un temps precís, com ara entrades HH:MM:SS per a esdeveniments o dades tècniques.
P: Com funciona el selector de temps al mòbil?
Cada dispositiu utilitza la seva interfície d'usuari nativa. iOS normalment utilitza un selector de roda, mentre que Android utilitza un selector d'estil rellotge.
P: Puc utilitzar la lògica condicional amb camps de temps?
Sí. Podeu mostrar o ocultar camps en funció dels moments seleccionats mitjançant condicions com ara "Igual a", "Major que" o "Menor que".
P: Què passa si els usuaris intenten seleccionar hores no vàlides?
Les hores fora del rang permès estan bloquejades per la validació del navegador i no es poden seleccionar.
P: Puc omplir prèviament amb una hora específica?
Sí. Trieu "Personalitzat" per a l'hora predeterminada i seleccioneu qualsevol valor que vulgueu precarregar.
P: El camp de temps funciona en tots els navegadors?
Tots els navegadors moderns admeten entrades de temps HTML5 amb selectors integrats. Els navegadors més antics tornen a l'entrada de text amb validació.
P: Puc personalitzar el camp de temps perquè coincideixi amb el meu lloc web?
Sí. El selector utilitza una interfície d'usuari nativa, però el camp d'entrada es pot estilitzar amb classes CSS.
P: Quin format utilitza l'hora enviada?
Els valors de temps sempre s'envien en format de 24 hores, cosa que garanteix la coherència de les dades per al processament.
