Campo de data
Recolle datas con precisión e control. Desde reservas de citas ata datas de nacemento con formato flexible, restricións de rango de datas e validación intelixente: o campo Data proporciona aos selectores de calendario nativos controis potentes para datas pasadas, datas futuras, fins de semana e rangos personalizados.
Recollida de datas profesional con validación intelixente
Perfecto para:
Funcións potentes para cada caso de uso
📅 Catro formatos de data
Escolla Preferencias rexionais:
Primeiro ano: 31/12/2023 (ISO 8601)
Formato estándar internacional. Ideal para bases de datos, ordenación e aplicacións técnicas.
Primeiro mes: 31/12/2023 (estilo estadounidense)
Formato americano. Máis familiar para os usuarios dos Estados Unidos coa orde mes-día-ano.
Primeiro día: 31/12/2023 (estilo do Reino Unido)
Formato británico/europeo con orde día-mes-ano. Común internacionalmente.
Primeiro día con guións: 31-12-2023
Formato europeo alternativo que usa guións en lugar de barras.
Por que é importante o formato:
Coincide coas expectativas dos usuarios por rexión
Evita confusións e erros
Garante un almacenamento de datos consistente
Mellora as taxas de finalización de formularios
Personalización da pantalla:
O formato afecta á forma en que as datas aparecen aos usuarios, mantendo o formato de almacenamento estándar internamente.
📏 Restricións de rango de datas
Datas seleccionables de control:
Primeira data permitida (mínimo):
Define a data máis temperá que os usuarios poden seleccionar. As datas anteriores a esta están desactivadas no selector de calendario.
Exemplos:
- Rexistro do evento: Data mínima = data de anuncio do evento
- Citas: Data mínima = hoxe (sen reservas anteriores)
- Datos históricos: Data mínima = data de fundación da empresa
- Prazos do proxecto: Data mínima = data de inicio do proxecto
Última data permitida (máxima):
Define a data máis recente que os usuarios poden seleccionar. As datas posteriores a esta están desactivadas no selector de calendario.
Exemplos:
- Inscrición anticipada: Data máxima = prazo límite
- Dispoñibilidade limitada: Data máxima = última data dispoñible
- Rexistros históricos: Data máxima = hoxe
- Período de tempo específico: Data máxima = fin da promoción
Botóns de configuración rápida:
Define as datas mínimas/máximas para hoxe cun só clic ou elimina as restricións ao instante.
⏮️ Bloquear datas pasadas
Impedir a selección de datas anteriores:
Activa "Bloquear datas pasadas" para desactivar todas as datas anteriores a hoxe. Os usuarios só poden seleccionar hoxe ou datas futuras.
Perfecto para:
- Reservas de citas (sen citas pasadas)
- Rexistro no evento (só para próximos eventos)
- Selección da data de entrega (entregas futuras)
- Sistemas de reserva (reservas anticipadas)
- Prazos (deben ser futuros)
Comportamento intelixente:
Actualízase automaticamente a diario: a data de hoxe é sempre válida, a de onte desactívase. Non se precisa xestión manual de datas.
Combina con outras restricións:
Usar coa data máxima para crear futuras ventás (por exemplo, reservas desde hoxe ata 30 días de antelación).
⏭️ Bloquear datas futuras
Impedir a selección de próximas datas:
Activa "Bloquear datas futuras" para desactivar todas as datas posteriores a hoxe. Os usuarios só poden seleccionar datas de hoxe ou pasadas.
Perfecto para:
- Colección de datas de nacemento (non pode ser futura)
- Datas de eventos históricos (só pasadas)
- Datas de inicio da experiencia (cando comezaches?)
- Datas de finalización (xa ocorreron)
- Datas de aniversario (eventos pasados)
Uso no mundo real:
Garante a entrada de datas lóxica: as datas de nacemento, as datas de contratación e as datas de graduación deben ser pasadas.
Validación integrada:
O navegador impide automaticamente as seleccións non válidas. Non se precisan mensaxes de erro confusas.
📆 Desactivar fins de semana
Selección en bloque para sábados e domingos:
Activa "Sen selección de fin de semana" para desactivar os sábados e os domingos no selector de calendario. Só se poden seleccionar os días laborables (de luns a venres).
Perfecto para:
- Reservas de citas de negocios
- Programación de entregas de oficina
- Selección da data da consulta
- Citas de servizo (só de luns a venres)
- Programación de reunións B2B
Interaccións intelixentes:
Se o usuario selecciona dalgún xeito un fin de semana (mediante o teclado), o sistema corríxese automaticamente ao seguinte luns. Protección sen fisuras.
Combina con outras opcións:
Funciona con restricións pasadas/futuras: só se poden seleccionar os días laborables dentro do rango permitido.
🎯 Opcións de data predeterminadas
Datas de inicio preseleccionadas:
Sen data preseleccionada (en branco):
O campo comeza baleiro. Os usuarios deben seleccionar activamente unha data. Ideal para datas que varían moito.
Data de hoxe:
Énchese automaticamente coa data actual cando se carga o formulario. Actualízase dinamicamente cada día.
Casos de uso:
- Campos de "Data da consulta"
- Formularios de marca de tempo
- Documentación da data actual
- Seleccións da programación de hoxe
Data de mañá:
Énchese automaticamente coa data de mañá. Perfecto para reservas para o día seguinte.
Casos de uso:
- Selección de entrega ao día seguinte
- Reservas de citas para mañá
- Valores predeterminados de eventos futuros
- Dispoñibilidade ao día seguinte
Data específica personalizada:
Escolle calquera data fixa para preseleccionar. Ideal para datas suxeridas ou formularios específicos de eventos.
Casos de uso:
- Data de cita recomendada
- Valores predeterminados das datas do evento
- Suxestións de prazos
- Datas de solicitude preenchidas
📱 Selector de calendario nativo
Selección de datas optimizada para o navegador:
Emprega entradas de data nativas de HTML5 co selector de calendario integrado do navegador. Ofrece unha experiencia familiar e específica da plataforma.
Aspecto específico da plataforma:
- iOS: Fermoso selector de rodas
- Android: Calendario de deseño de materiais
- Chrome para escritorio: calendario despregable
- Safari de escritorio: selector compacto
- Todos optimizados para a súa plataforma
Beneficios:
- Non se precisa biblioteca de JavaScript
- Carga instantánea
- Accesible por defecto
- Navegable por teclado
- Optimizado para o tacto
- Tamaño mínimo do ficheiro
Fai clic en calquera lugar:
Pódese premer en todo o campo para abrir o calendario. Unha área de interacción ampla mellora a usabilidade.
✅ Validación intelixente de datas
Capas de validación integradas:
Validación de formato:
O navegador garante automaticamente o formato de data correcto. Os usuarios non poden introducir datas non válidas como "2023-13-45".
Validación de rango:
As datas mínimas/máximas aplícanse no nivel do selector. As datas non válidas están desactivadas; non se poden seleccionar.
Validación lóxica:
As restricións de pasado/futuro/fin de semana aplicáronse automaticamente. O sistema impide as seleccións non válidas.
Limpar as mensaxes de erro:
Se os usuarios evitan dalgún xeito as restricións, aparecen mensaxes claras que explican: «A data debe ser posterior ao 01/01/2024» ou «A data debe ser anterior ao 31/12/2024».
🔀 Lóxica condicional
Visibilidade do campo de data dinámica:
Mostrar ou ocultar campos de data segundo outros valores do formulario. Mostrar campos de data relevantes só cando sexa necesario.
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 "Data preferida" só cando o tipo de reserva sexa igual a "Cita"
- Mostrar a "Data do evento" cando o tipo de evento non está baleiro
- Mostrar a "Data de entrega" cando o método de envío sexa igual a "Programado"
- Ocultar a "Data de regreso" cando o tipo de billete sexa "Só ida"
🎯 Experiencia de usuario mellorada
Funcións intelixentes integradas:
- Visualización da data: a data seleccionada móstrase nun formato lexible
- Icona de calendario: indicador visual do selector de datas
- Navegación do teclado: as teclas de frecha permiten navegar polo calendario
- Accesibilidade das pestanas: compatibilidade total co teclado
- Optimizado táctil: obxectivos táctiles grandes en móbiles
- Corrección automática: as datas non válidas axústanse automaticamente á data válida máis próxima
- Resaltado hoxe: data actual resaltada no selector
- Selección rápida: fai clic na data e o selector péchase automaticamente
- Soporte de texto de axuda: engadir consellos ou instrucións sobre o formato de data
- Validación requirida: facer que a selección de data sexa obrigatoria
- Clases CSS personalizadas: aplicar estilos personalizados
- Compatibilidade con accesibilidade: etiquetas ARIA, compatible con lectores de pantalla
Configuración sinxela en 3 pasos
Ten listo o teu campo de data en minutos
Engadir campo de data
Arrastra e solta o campo Data da sección Campos básicos no formulario.
Escolla formato e rango
Selecciona o formato de data (EE. UU., Reino Unido, ISO), configura opcionalmente límites de datas mínimos/máximos e activa o bloqueo de pasados/futuros/fins de semana segundo sexa necesario.
Definir data predeterminada
Escolle se o campo comeza en branco, se se preenche con hoxe, mañá ou unha data personalizada que especifiques.
🎉 Iso é todo! O teu campo de data está listo con validación intelixente e selectores nativos.
Aplicacións do mundo real
Reserva de cita
* Datas das citas médicas
* Programación de consultas
* Selección de citas de servizo
* Coordinación da data da reunión
Rexistro de eventos
* Datas de asistencia ao evento
* Selección da data do obradoiro
* Rexistro na conferencia
* Datas de matrícula nas clases
Entrega e envío
* Datas de entrega preferidas
* Selección da data de envío
* Programación da data de recollida
* Planificación da data de envío
Aplicacións comerciais
* Datas límite do proxecto
* Datas de entrega das tarefas
* Datas de entrada en vigor do contrato
* Datas de inicio/fin do acordo
Información persoal
* Recollida de datas de nacemento
* Datas de aniversario
* Data de inicio do emprego
* Datas de finalización da educación
Reservas
* Datas de entrada no hotel
* Datas de inicio do alugueiro
* Datas de confirmación da reserva
* Selección do período de reserva
Opcións de campo completas
Configuración básica
- Etiqueta do campo: o título que se mostra enriba do campo de data
- Descrición/Texto de axuda: guía adicional para os usuarios
- Campo obrigatorio: facer que a selección de data sexa obrigatoria
- Marcador de posición: non aplicable para selectores de datas nativos
Formato de data
- Como mostrar as datas:
- Primeiro ano: 31/12/2023 (ISO 8601)
- Primeiro mes: 31/12/2023 (estilo estadounidense)
- Primeiro día: 31/12/2023 (estilo do Reino Unido)
- Primeiro día con guións: 31-12-2023
Restricións de rango de datas
- Primeira data permitida: a data máis temperá que os usuarios poden seleccionar (déixeo en branco se non hai límite)
- Última data permitida: a data máis recente que os usuarios poden seleccionar (déixeo en branco se non hai límite)
Opcións de bloqueo de datas
- Bloquear datas pasadas: impide seleccionar calquera data anterior a hoxe
- Bloquear datas futuras: impide seleccionar calquera data posterior a hoxe
- Sen selección de fin de semana: impide seleccionar sábados e domingos
Selección da data de inicio:
- Sen data preseleccionada (en branco): o campo comeza baleiro
- Data de hoxe: data actual preenchida
- Data de mañá: preenchido para o día seguinte
- Data específica (escolleches) – Data personalizada preenchida
Data predeterminada personalizada: escolle a túa data de inicio (móstrase cando se selecciona "Data específica")
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
- Campo oculto: fai que o campo sexa invisible pero inclúe a data nos envíos
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidade: etiquetas ARIA para lectores de pantalla
Por que elixir o noso campo de data?
✅ Múltiples formatos: formatos estadounidense, británico, ISO e discontinuo
✅ Control do rango de datas: define límites mínimos/máximos con precisión
✅ Bloquear datas pasadas: só permitir seleccións de datas futuras
✅ Bloquear datas futuras: só permitir seleccións de datas pasadas
✅ Desactivar fins de semana: selección só para días laborables para empresas
✅ Predefinidos intelixentes: preenche con hoxe, mañá ou unha data personalizada
✅ Selectores nativos: calendarios optimizados para navegadores para cada plataforma
✅ Validación automática: non se poden seleccionar datas non válidas
✅ Totalmente integrado: funciona perfectamente con todas as funcións do formulario
Preguntas máis frecuentes
P: Que formatos de data son compatibles?
Catro formatos: ISO (2023-12-31), US (12/31/2023), UK (31/12/2023) e Dashed (31-12-2023). Escolle o formato que mellor se adapte ao teu público.
P: Como podo evitar que os usuarios seleccionen datas pasadas?
Activa "Bloquear datas pasadas". Calquera data anterior a hoxe deixa de ser seleccionable no selector de datas.
P: Podo limitar as datas a un rango específico?
Si. Define a "Primeira data permitida" e a "Última data permitida" para restrinxir as opcións a unha xanela definida.
P: Que fai «Disable Weekends»?
Elimina os sábados e os domingos da opción de selección. Só os días de luns a venres seguen dispoñibles.
P: Como funcionan as datas predeterminadas?
Escolle se o campo comeza baleiro, se mostra a data de hoxe, a data de mañá ou unha data personalizada. Hoxe e mañá axústanse automaticamente.
P: O selector de datas ten o mesmo aspecto en todos os dispositivos?
Non. Emprega a interface de usuario nativa de cada dispositivo: selectores de roda de iOS, calendarios de Android, selectores de escritorio, etc.
P: Podo bloquear datas futuras para os campos de data de nacemento?
Si. Activa "Bloquear datas futuras" para que os usuarios só poidan escoller datas ata hoxe, inclusive.
P: Como funcionan as datas mínimas/máximas xunto co bloqueo de pasado/futuro?
Acumúlanse. Por exemplo, bloquear datas pasadas máis unha data máxima de 30 días de antelación resulta nun intervalo que vai dende hoxe ata 30 días de antelación.
P: Os usuarios poden escribir datas en vez de usar o selector?
Algúns navegadores permiten escribir con validación. Outros forzan o selector de data. Todos eles aplican o formato correcto.
P: Que ocorre se un usuario selecciona unha fin de semana cando as fins de semana están desactivadas?
O sistema axústase automaticamente ao día laborable válido máis próximo, normalmente o luns seguinte.
P: Podo usar a lóxica condicional con campos de data?
Si. Usa comparacións como "Igual a", "Está baleiro", "Non está baleiro", "Maior que" ou "Menor que" para controlar a visibilidade doutros campos.
P: Como podo establecer unha data límite?
Introduce a túa data límite en "Última data permitida". Os usuarios non poden seleccionar datas posteriores a ese punto. Combina esta opción con "Bloquear datas pasadas" se necesitas dispoñibilidade só para o futuro.
