Campo de tempo
Recolle o tempo con precisión e facilidade. Desde a programación de citas ata a selección de quendas con elegantes selectores de tempo nativos, intervalos intelixentes e formato flexible, o campo Tempo ofrece validación, personalización e unha experiencia de usuario fluída.
Recollida intelixente de tempo con validación integrada
Perfecto para:
Funcións potentes para cada caso de uso
🕐 Formatos de tempo flexibles
Pantalla de 24 horas ou 12 horas
Escolle o formato que mellor se adapte ao teu público. Usa o horario militar de 24 horas (14:30) para usuarios internacionais ou o horario de 12 horas con AM/PM (2:30 PM) para maior familiaridade.
Conversión automática de formato
O campo xestiona a conversión de formato automaticamente: os usuarios ven o seu formato preferido mentres o sistema recibe datos consistentes.
Exemplos:
- Horas comerciais9:00 a.m. – 5:00 p.m. (12 horas)
- programación internacional09:00 – 17:00 (24 horas)
- Citas médicas: 14:30 (precisión de 24 horas)
⏰ Intervalos de tempo intelixentes
Precisión da selección de control
Define o grao de precisión que debe ter a selección de tempo. Escolle entre intervalos de cada minuto e de cada hora segundo as túas necesidades.
Intervalos dispoñibles:
- Cada minuto (12:00, 12:01, 12:02…): máxima precisión
- Cada 5 minutos (12:00, 12:05, 12:10…) – Citas estándar
- Cada 10 minutos (12:00, 12:10, 12:20…) – Reservas rápidas
- Cada 15 minutos (12:00, 12:15, 12:30…) – O máis común
- Cada 30 minutos (12:00, 12:30, 1:00…) – Franxas de media hora
- Cada hora (12:00, 1:00, 2:00…) – Selección sinxela
Por que importa:
Menos opcións = selección máis rápida. Adapta os intervalos ás túas necesidades de programación para unha mellor experiencia de usuario.
🎯 Restricións de rango horario
Definir as horas máis temperás e máis recentes
Limita as horas dispoñibles para que coincidan co horario comercial, os horarios de eventos ou as ventás operativas. Os usuarios non poden seleccionar horas fóra do rango definido.
Validación intelixente
A validación a nivel de navegador impide envíos non válidos antes de que os usuarios fagan clic en enviar.
Casos de uso:
- Horario comercial: só de 9:00 a 6:00
- Eventos nocturnos: só despois das 5:00
- Franxas horarias da mañá: só antes das 12:00 h
- Turno de noite: 10:00 – 6:00
Exemplos:
- Reservas en restaurantes: Mín. 11:00, Máx. 10:00
- Clases de ximnasia: Mín. 6:00, Máx. 9:00
- Horario de atención: Mín. 8:00, Máx. 5:00
🔧 Opcións de hora predeterminadas
Tres valores iniciais intelixentes:
1. En branco (sen valor predeterminado)
Os usuarios comezan cun campo baleiro; o mellor é cando o tempo é sempre único.
2. Hora actual
Énchese automaticamente coa hora actual cando se carga o formulario: perfecto para campos de "hora do incidente" ou de marca de tempo.
3. Hora personalizada
Preselecciona unha hora específica como "9:00 AM" para ver horarios de cita suxeridos ou seleccións habituais.
Cando usar cada un:
- En branco: horas de inicio de eventos, horarios persoais
- Actual: marcas de tempo do informe, horas de rexistro
- Personalizado: horas de reunión suxeridas, horas predeterminadas
⚡ Precisión de segundos (opcional)
Engadir segundos cando sexa necesario
Activa o campo de segundos (HH:MM:SS) para un seguimento preciso do tempo. Perfecto para probas de tempo, cronómetros e marcas de tempo exactas.
Exemplos de formato:
- Sen segundos: 14:30 ou 2:30
- Con segundos: 14:30:45 ou 2:30:45
Ideal para:
- Cronometraxe deportiva e resultados de carreiras
- experimentos científicos
- Sistemas de rexistro precisos
- Presentacións para probas contrarreloxo
🔀 Lóxica condicional
Campos de tempo dinámicos
Mostra ou oculta o campo de tempo segundo outros valores do formulario. Crea formularios intelixentes que se adapten á entrada do usuario.
Regras de lóxica avanzada:
- Lóxica E: deben cumprirse todas as condicións
- OU Lóxica: calquera condición pode desencadear a acción
- 8 operadores: Igual a, Non igual a, Maior que, Menor que, Contén, Está baleiro e máis
Casos de uso:
- Mostrar só a "Hora de chamada preferida" cando se seleccione "Contacto por teléfono"
- Mostrar a "Hora de inicio do evento" cando o tipo de evento sexa igual a "Evento personalizado"
- Ocultar o "Tempo de entrega" cando o método de entrega é "Envío estándar"
- Mostrar a "Hora da reunión" cando o tipo de reunión sexa igual a "Presencial"
🎨 Experiencia de usuario mellorada
Activación en calquera lugar con clic
Fai clic en calquera lugar do campo para abrir o selector de tempo nativo: unha área de destino máis grande, mellor usabilidade.
Selectores de tempo nativos
Emprega o selector de hora integrado no navegador con interfaces familiares e optimizadas para plataformas (roda de iOS, reloxo de Android, menú despregable do escritorio).
Optimizado para móbiles
Selección de tempo táctil con teclados e selectores móbiles nativos.
Características adicionais:
- Clases CSS personalizadas para estilos
- Modo de campo oculto para as horas do sistema
- Compatibilidade con accesibilidade (etiquetas ARIA)
- Botón transparente para un reinicio sinxelo
- Validación de campos obrigatorios
- Compatibilidade con texto de marcadores de posición
Configuración sinxela en 3 pasos
Ten listo o teu campo de tempo en minutos
Engadir o campo de tempo
Arrastra e solta o campo Hora da sección Campos básicos no teu formulario.
Configurar formato e intervalos
Escolle o formato de 12 ou 24 horas, define intervalos de tempo (cada 15 minutos, 30 minutos, etc.) e, opcionalmente, engade restricións de tempo mínimas/máximas.
Definir a hora predeterminada
Escolle se o campo comeza en branco, coa hora actual ou cunha hora personalizada que especifiques. Activa os segundos se necesitas unha cronometraxe precisa.
🎉 Iso é todo! O teu campo de hora está listo con formato e validación intelixentes.
Aplicacións do mundo real
Servizo e reservas
* Horarios de servizo do vehículo
* Horarios de visitas á propiedade
* Horarios de reserva de excursións
* Franxas horarias de reserva de instalacións
Reserva de clases e actividades
* Horarios das clases de fitness
* Programación das sesións de formación
* Franxas horarias para actividades en grupo
* Preferencias de horario de lección
Operacións empresariais
* Horas de inicio/fin de quenda
* Presentación de calendario de traballo
* Coordinación do tempo de reunión
* Selección do tempo de dispoñibilidade
Reserva de cita
* Programación de citas médicas
* Reservas de salóns de beleza e spa
* Selección da hora da consulta
* Solicitude de citas de servizo
Rexistro de eventos
* Horas de inicio/fin do evento
* Preferencias de tempo de sesión
* Franxas horarias dos obradoiros
* Selección do horario da conferencia
Entrega e recollida
* Ventás de tempo para a entrega de comida
* Horarios de recollida na tenda
* Programación de recollida na beirarrúa
* Preferencias de franxa horaria de entrega
Opcións de campo completas
Configuración básica
- Etiqueta do campo: o título que se mostra enriba do campo de tempo
- Descrición/Texto de axuda: guía adicional para os usuarios
- Campo obrigatorio: facer que a selección de hora sexa obrigatoria
- Texto de marcador de posición: texto de pista antes de que os usuarios seleccionen unha hora
Configuración do formato de hora
- Formato de visualización
- Reloxo de 24 horas (14:30)
- Reloxo de 12 horas con AM/PM (2:30 PM)
Precisión e intervalos
- Intervalos de tempo
- Cada minuto
- Cada 5 minutos
- Cada 10 minutos
- Cada 15 minutos (o máis popular)
- Cada 30 minutos
- Cada hora
Mostrar segundos: engade un campo de segundos para a hora precisa (HH:MM:SS)
Restricións de tempo
- Tempo máis cedo permitido (mín.): os usuarios non poden seleccionar tempos anteriores a este
- Última hora permitida (máx.): os usuarios non poden seleccionar horas posteriores a esta
Valores predeterminados
- Selección da hora de inicio
- Sen tempo preseleccionado (en branco)
- Hora actual (dinámica: cárgase cando se abre o formulario)
- Hora personalizada (hora específica que defines)
Hora de inicio personalizada: escolla a hora específica para preencher (cando se selecciona "Personalizada")
Lóxica condicional
- Activar a lóxica condicional: mostrar/ocultar segundo as condicións
- Tipo lóxico
- Débense cumprir todas as condicións (E)
- Calquera condición pódese cumprir (OU)
- Regras de condición
- Mostrar/Ocultar: acción a realizar
- Campo: que campo comprobar
- Operador – Igual a, Non é igual a, Contén, Maior que, Menor que, Está baleiro, Non está baleiro
- Valor – Valor de comparación
- Condicións múltiples: engade regras ilimitadas
Opcións avanzadas
- Modo de campo oculto: usar como campo oculto cun valor predefinido
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidade: etiquetas e descricións de ARIA
Por que elixir o noso campo de tempo?
✅ Intuitivo: os selectores nativos do navegador proporcionan experiencias familiares
✅ Flexible: os formatos de 12 ou 24 horas axústanse ás preferencias do usuario
✅ Preciso: intervalos personalizados desde cada minuto ata cada hora
✅ Intelixente: as restricións mín./máx. impiden seleccións de tempo non válidas
✅ Dinámico: a lóxica condicional crea formularios adaptativos
✅ Fácil de usar: activación con só premer en calquera lugar para unha mellor experiencia de usuario
✅ Optimizado para móbiles: selectores de hora nativos compatibles co tacto
✅ Totalmente integrado: funciona perfectamente con todas as funcións do formulario
Preguntas máis frecuentes
P: Cal é a diferenza entre o formato de 12 horas e o de 24 horas?
O formato de 12 horas mostra as horas con AM/PM, como as 2:30 PM. O formato de 24 horas usa horas como as 14:30 e é común internacionalmente.
P: Como funcionan os intervalos de tempo?
Os intervalos establecen o grao de detalle das opcións de tempo. Por exemplo, un intervalo de 15 minutos mostra as 9:00, as 9:15, as 9:30 e así sucesivamente.
P: Podo restrinxir os horarios só ao horario comercial?
Si. Define as horas máis temperás e máis tardías, como de 9:00 a 5:00, e os usuarios só poderán escoller dentro dese intervalo.
P: Que significa a opción predeterminada de "Hora actual"?
Cando está activado, o campo énchese automaticamente coa hora actual do usuario cando se carga o formulario.
P: Necesito o campo de segundos?
Normalmente non. Actívao só cando precises unha sincronización precisa, como entradas HH:MM:SS para eventos ou datos técnicos.
P: Como funciona o selector de tempo no móbil?
Cada dispositivo usa a súa interface de usuario nativa. iOS normalmente usa un selector de roda, mentres que Android usa un selector de estilo reloxo.
P: Podo usar a lóxica condicional con campos de tempo?
Si. Podes mostrar ou ocultar campos segundo os tempos seleccionados usando condicións como "Igual a", "Maior a" ou "Menor a".
P: Que ocorre se os usuarios tentan seleccionar horas non válidas?
As horas fóra do rango permitido están bloqueadas pola validación do navegador e non se poden seleccionar.
P: Podo preencher cunha hora específica?
Si. Escolle "Personalizado" para a hora predeterminada e selecciona calquera valor que queiras precargar.
P: Funciona o campo de hora en todos os navegadores?
Todos os navegadores modernos admiten entradas de tempo HTML5 con selectores integrados. Os navegadores máis antigos volven á entrada de texto con validación.
P: Podo aplicar o estilo do campo de hora para que coincida co meu sitio?
Si. O selector usa unha interface de usuario nativa, pero o campo de entrada pode ter estilos con clases CSS.
P: Que formato usa a hora enviada?
Os valores de tempo envíanse sempre en formato de 24 horas, o que garante a coherencia dos datos para o seu procesamento.
