Campo de tiempo
Registre el tiempo con precisión y facilidad. Desde la programación de citas hasta la selección de turnos con elegantes selectores de tiempo nativos, intervalos inteligentes y formato flexible, el campo Hora ofrece validación, personalización y una experiencia de usuario fluida.
Recopilación de tiempo inteligente con validación integrada
Perfecto para:
Funciones potentes para cada caso de uso
🕐 Formatos de horario flexibles
Visualización de 24 o 12 horas
Elige el formato que mejor se adapte a tu audiencia. Usa el formato militar de 24 horas (14:30) para usuarios internacionales o el formato de 12 horas con AM/PM (2:30 p. m.) para mayor familiaridad.
Conversión de formato automático
El campo maneja la conversión de formato automáticamente: los usuarios ven su formato preferido mientras su sistema recibe datos consistentes.
Ejemplos:
- Horas de oficina: 9:00 AM – 5:00 PM (12 horas)
- Programación internacional: 09:00 – 17:00 (24 horas)
- Citas médicas: 14:30 (precisión de 24 horas)
⏰ Intervalos de tiempo inteligentes
Precisión de selección de control
Establezca la granularidad de la selección de tiempo. Elija intervalos de minutos a horas según sus necesidades.
Intervalos disponibles:
- 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…) – Lo más común
- Cada 30 minutos (12:00, 12:30, 1:00…) – Franjas de media hora
- Cada hora (12:00, 1:00, 2:00…) – Selección sencilla
Por qué importa:
Menos opciones = selección más rápida. Adapte los intervalos a sus necesidades de programación para una mejor experiencia de usuario.
🎯 Restricciones de rango de tiempo
Establecer las horas más tempranas y más tardías
Limite las horas disponibles para que coincidan con el horario comercial, la programación de eventos o las ventanas operativas. Los usuarios no pueden seleccionar horas fuera del rango definido.
Validación inteligente
La validación a nivel de navegador evita envíos no válidos antes de que los usuarios hagan clic en enviar.
Casos de uso:
- Horario comercial: de 9:00 a. m. a 6:00 p. m. únicamente
- Eventos nocturnos: solo después de las 5:00 p. m.
- Franjas horarias de la mañana: solo antes de las 12:00 p. m.
- Turno de noche: 10:00 – 6:00
Ejemplos:
- Reservas en restaurante: Mín. 11:00, Máx. 10:00
- Clases de gimnasia: Mínimo 6:00 a. m., máximo 9:00 p. m.
- Horario de soporte: Mínimo 8:00 a. m., máximo 5:00 p. m.
🔧 Opciones de hora predeterminadas
Tres valores iniciales inteligentes:
1. En blanco (sin valor predeterminado)
Los usuarios comienzan con un campo vacío: es mejor cuando la hora siempre es única.
2. Hora actual
Se completa automáticamente con la hora actual cuando se carga el formulario: perfecto para campos de “hora del incidente” o de marca de tiempo.
3. Hora personalizada
Seleccione previamente una hora específica, como “9:00 a. m.”, para obtener horarios de citas sugeridos o selecciones comunes.
Cuándo utilizar cada uno:
- En blanco: horas de inicio de eventos, horarios personales
- Actual: Informe de marcas de tiempo y horas de registro
- Personalizado: horarios de reunión sugeridos, horarios predeterminados
⚡ Precisión de segundos (opcional)
Añade segundos cuando sea necesario
Activa el campo de segundos (HH:MM:SS) para un seguimiento preciso del tiempo. Ideal para contrarrelojes, cronómetros y marcas de tiempo exactas.
Ejemplos de formato:
- Sin segundos: 14:30 o 2:30 horas
- Con segundos: 14:30:45 o 2:30:45 PM
Ideal para:
- Cronometraje deportivo y resultados de carreras
- Experimentos científicos
- Sistemas de registro precisos
- Presentaciones de contrarreloj
🔀 Lógica condicional
Campos de tiempo dinámicos
Muestra u oculta el campo de hora según otros valores del formulario. Crea formularios inteligentes que se adapten a la entrada del usuario.
Reglas de lógica avanzada:
- Lógica AND: Se deben cumplir todas las condiciones
- Lógica OR: cualquier condición puede desencadenar la acción
- 8 operadores: igual a, no igual a, mayor que, menor que, contiene, está vacío y más
Casos de uso:
- Mostrar “Hora de llamada preferida” solo cuando se selecciona “Contacto por teléfono”
- Mostrar “Hora de inicio del evento” cuando el tipo de evento sea “Evento personalizado”
- Ocultar “Tiempo de entrega” cuando el método de entrega sea “Envío estándar”
- Mostrar la "Hora de reunión" cuando el tipo de reunión sea "Presencial"
🎨 Experiencia de usuario mejorada
Activación con clic en cualquier lugar
Haga clic en cualquier parte del campo para abrir el selector de hora nativo: área objetivo más grande, mejor usabilidad.
Selectores de tiempo nativos
Utiliza el selector de tiempo integrado del navegador con interfaces familiares optimizadas para la plataforma (rueda de iOS, reloj de Android, menú desplegable del escritorio).
Móvil optimizado
Selección de hora táctil con teclados y selectores móviles nativos.
Características adicionales:
- Clases CSS personalizadas para aplicar estilo
- Modo de campo oculto para horas del sistema
- Soporte de accesibilidad (etiquetas ARIA)
- Botón de borrado para un restablecimiento fácil
- Validación de campos obligatorios
- Compatibilidad con texto de marcador de posición
Configuración sencilla en 3 pasos
Prepare su Time Field en minutos
Agregar el campo de tiempo
Arrastre y suelte el campo Hora desde la sección Campos básicos a su formulario.
Configurar formato e intervalos
Elija el formato de 12 o 24 horas, establezca intervalos de tiempo (cada 15 minutos, 30 minutos, etc.) y, opcionalmente, agregue restricciones de tiempo mínimo/máximo.
Establecer hora predeterminada
Elige si el campo empieza en blanco, con la hora actual o con una hora personalizada que especifiques. Activa los segundos si necesitas una hora precisa.
🎉 ¡Listo! Tu campo de hora está listo con formato y validación inteligentes.
Aplicaciones en el mundo real
Servicio y Reservas
* Tiempos de servicio del vehículo
* Horarios de visitas a la propiedad
* Horarios de reserva de tours
* Franjas horarias de reserva de instalaciones
Reserva de clases y actividades
* Horarios de clases de fitness
* Programación de sesiones de entrenamiento
* Horarios para actividades grupales
* Preferencias de horario de clase
Operaciones de negocios
* Horas de inicio y fin de turnos
* Entrega de horarios de trabajo
*Coordinación de horarios de reuniones
*Selección de horario de disponibilidad
Reserva de Citas
* Programación de citas médicas
* Reservas de salón y spa
*Selección de horario de consulta
* Solicitudes de citas de servicio
Inscripción para el evento
* Horas de inicio y finalización del evento
* Preferencias de horario de sesión
* Horarios de taller
* Selección del horario de la conferencia
Entrega y recogida
* Ventanas de tiempo de entrega de alimentos
* Horarios de recogida en tienda
* Programación de recogida en la acera
* Preferencias de franja horaria de entrega
Opciones de campo completas
Configuración básica
- Etiqueta de campo: el título que se muestra sobre el campo de hora
- Descripción/Texto de ayuda: orientación adicional para los usuarios
- Campo obligatorio: hacer que la selección de hora sea obligatoria
- Texto de marcador de posición: texto de sugerencia antes de que los usuarios seleccionen una hora
Configuración del formato de hora
- Formato de presentación
- Reloj de 24 horas (14:30)
- Reloj de 12 horas con AM/PM (2:30 p.m.)
Precisión e intervalos
- Intervalos de tiempo
- Cada minuto
- Cada minuto 5
- Cada minuto 10
- Cada 15 minutos (más popular)
- Cada minuto 30
- Cada hora
Mostrar segundos: agregue un campo de segundos para una hora precisa (HH:MM:SS)
Restricciones de tiempo
- Hora más temprana permitida (mín.): los usuarios no pueden seleccionar horas anteriores a esta
- Última hora permitida (máx.): los usuarios no pueden seleccionar horas posteriores a esta
Valores predeterminados
- Selección de hora de inicio
- Sin tiempo preseleccionado (en blanco)
- Hora actual (dinámica: se carga cuando se abre el formulario)
- Hora personalizada (hora específica que usted configure)
Hora de inicio personalizada: seleccione la hora específica para completar previamente (cuando se selecciona "Personalizado")
La lógica condicional
- Habilitar lógica condicional: mostrar u ocultar según condiciones
- Tipo de lógica
- Se deben cumplir todas las condiciones (Y)
- Cualquier condición se puede cumplir (O)
- Reglas de condición
- Mostrar/Ocultar – Acción a tomar
- Campo – ¿Qué campo comprobar?
- Operador – Igual, No igual, Contiene, Mayor que, Menor que, Está vacío, No está vacío
- Valor – Valor de comparación
- Condiciones múltiples: agregue reglas ilimitadas
Opciones Avanzadas
- Modo de campo oculto: úselo como campo oculto con un valor preestablecido
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidad: etiquetas y descripciones ARIA
¿Por qué elegir nuestro campo de tiempo?
✅ Intuitivo: los selectores de navegador nativos brindan experiencias familiares
✅ Flexible: los formatos de 12 o 24 horas se adaptan a las preferencias del usuario
✅ Preciso: intervalos personalizados desde cada minuto hasta cada hora
✅ Inteligente: las restricciones mínimas y máximas evitan selecciones de tiempo no válidas
✅ Dinámica: la lógica condicional crea formas adaptativas
✅ Fácil de usar: activación con un solo clic para una mejor experiencia de usuario
✅ Optimizado para dispositivos móviles: selectores de hora nativos compatibles con el tacto
✅ Totalmente integrado: funciona a la perfección con todas las funciones del formulario
Preguntas frecuentes
P: ¿Cuál es la diferencia entre el formato de 12 horas y el de 24 horas?
El formato de 12 horas muestra las horas con AM/PM, como 2:30 PM. El formato de 24 horas usa horas como 14:30 y es común a nivel internacional.
P: ¿Cómo funcionan los intervalos de tiempo?
Los intervalos determinan el nivel de detalle de las opciones de tiempo. Por ejemplo, un intervalo de 15 minutos muestra las 9:00, las 9:15, las 9:30, etc.
P: ¿Puedo restringir los horarios únicamente al horario comercial?
Sí. Establezca las horas más tempranas y más tardías, como por ejemplo de 9:00 a. m. a 5:00 p. m., y los usuarios podrán elegir solo dentro de ese rango.
P: ¿Qué significa el valor predeterminado “Hora actual”?
Cuando está habilitado, el campo se completa automáticamente con la hora actual del usuario cuando se carga el formulario.
P: ¿Necesito el campo de segundos?
Generalmente no. Actívala solo cuando necesites una sincronización precisa, como entradas HH:MM:SS para eventos o datos técnicos.
P: ¿Cómo funciona el selector de hora en el móvil?
Cada dispositivo utiliza su propia interfaz de usuario nativa. iOS normalmente utiliza un selector de rueda, mientras que Android utiliza un selector estilo reloj.
P: ¿Puedo utilizar lógica condicional con campos de tiempo?
Sí. Puede mostrar u ocultar campos según las horas seleccionadas usando condiciones como "Igual a", "Mayor que" o "Menor que".
P: ¿Qué sucede si los usuarios intentan seleccionar horarios no válidos?
Los horarios fuera del rango permitido están bloqueados por la validación del navegador y no se pueden seleccionar.
P: ¿Puedo completar previamente con una hora específica?
Sí. Elija “Personalizado” para el tiempo predeterminado y seleccione cualquier valor que desee precargar.
P: ¿El campo de hora funciona en todos los navegadores?
Todos los navegadores modernos admiten entradas de tiempo HTML5 con selectores integrados. Los navegadores más antiguos recurren a la entrada de texto con validación.
P: ¿Puedo diseñar el campo de hora para que coincida con mi sitio?
Sí. El selector utiliza una interfaz de usuario nativa, pero el campo de entrada se puede diseñar con clases CSS.
P: ¿Qué formato utiliza el tiempo enviado?
Los valores de tiempo siempre se envían en formato de 24 horas, lo que garantiza datos consistentes para el procesamiento.
