Camp de data
Recopila dates amb precisió i control. Des de reserves de cites fins a dates de naixement amb format flexible, restriccions d'interval de dates i validació intel·ligent, el camp Data proporciona als selectors de calendari natius controls potents per a dates passades, dates futures, caps de setmana i intervals personalitzats.
Recollida de dates professional amb validació intel·ligent
Perfecte per:
Funcions potents per a cada cas d'ús
📅 Quatre formats de data
Trieu les preferències regionals:
Any primer: 31/12/2023 (ISO 8601)
Format estàndard internacional. Ideal per a bases de dades, ordenació i aplicacions tècniques.
Primer mes: 31/12/2023 (estil EUA)
Format americà. Més familiar per als usuaris dels EUA amb ordre mes-dia-any.
Primer dia: 31/12/2023 (estil Regne Unit)
Format britànic/europeu amb ordre dia-mes-any. Comú internacionalment.
Primer dia amb guions: 31-12-2023
Format europeu alternatiu que utilitza guions en lloc de barres obliques.
Per què és important el format:
Coincideix amb les expectatives dels usuaris per regió
Evita confusions i errors
Garanteix un emmagatzematge de dades coherent
Millora les taxes d'emplenament de formularis
Personalització de la pantalla:
El format afecta la manera com es mostren les dates als usuaris, tot mantenint el format d'emmagatzematge estàndard internament.
📏 Restriccions d'interval de dates
Dates seleccionables de control:
Primera data permesa (mínima):
Defineix la data més primerenca que els usuaris poden seleccionar. Les dates anteriors a aquesta estan desactivades al selector de calendari.
Exemples:
- Registre a l'esdeveniment: Data mínima = data d'anunci de l'esdeveniment
- Cites: Data mínima = avui (sense reserves anteriors)
- Dades històriques: Data mínima = data de fundació de l'empresa
- Terminis del projecte: Data mínima = data d'inici del projecte
Última data permesa (màxima):
Defineix la data més recent que els usuaris poden seleccionar. Les dates posteriors a aquesta estan desactivades al selector de calendari.
Exemples:
- Inscripció anticipada: Data màxima = data límit
- Disponibilitat limitada: Data màxima = última data disponible
- Registres històrics: Data màxima = avui
- Termini específic: Data màxima = finalització de la promoció
Botons de configuració ràpida:
Estableix les dates mínimes/màximes per avui amb un sol clic o elimina les restriccions a l'instant.
⏮️ Bloqueja les dates passades
Impedir la selecció de dates anteriors:
Activeu "Bloqueja dates passades" per desactivar totes les dates anteriors a avui. Els usuaris només poden seleccionar dates d'avui o futures.
Perfecte per a:
- Reserva de cites (no hi ha cites anteriors)
- Registre a l'esdeveniment (només per a propers esdeveniments)
- Selecció de la data de lliurament (lliuraments futurs)
- Sistemes de reserves (reserves anticipades)
- Terminis (han de ser futurs)
Comportament intel·ligent:
Actualitza automàticament diàriament: la data d'avui sempre és vàlida, la d'ahir es desactiva. No cal gestionar les dates manualment.
Combina amb altres restriccions:
Utilitzeu-ho amb la data màxima per crear finestres futures (per exemple, reserves des d'avui fins a 30 dies abans).
⏭️ Bloqueja dates futures
Impedir la selecció de les properes dates:
Activeu "Bloqueja dates futures" per desactivar totes les dates posteriors a avui. Els usuaris només poden seleccionar dates d'avui o dates passades.
Perfecte per a:
- Recollida de dates de naixement (no pot ser futura)
- Dates d'esdeveniments històrics (només passats)
- Dates d'inici de l'experiència (quan vau començar?)
- Dates de finalització (ja han passat)
- Dates d'aniversari (esdeveniments passats)
Ús al món real:
Garanteix l'entrada de dates lògica: les dates de naixement, les dates de contractació i les dates de graduació han de ser en el passat.
Validació integrada:
El navegador evita automàticament les seleccions no vàlides. No calen missatges d'error confusos.
📆 Desactiva els caps de setmana
Selecció en bloc de dissabte i diumenge:
Activeu "Sense selecció de cap de setmana" per desactivar els dissabtes i diumenges al selector de calendari. Només es poden seleccionar els dies laborables (de dilluns a divendres).
Perfecte per a:
- reserves de cites de negocis
- Programació de lliuraments a l'oficina
- Selecció de la data de la consulta
- Cites de servei (només de dilluns a divendres)
- Planificació de reunions B2B
Interaccions intel·ligents:
Si l'usuari selecciona d'alguna manera un cap de setmana (mitjançant el teclat), el sistema corregeix automàticament al dilluns següent. Protecció perfecta.
Combina amb altres opcions:
Funciona amb restriccions de passat/futur: només es poden seleccionar els dies laborables dins del rang permès.
🎯 Opcions de data predeterminades
Dates d'inici preseleccionades:
Sense data preseleccionada (en blanc):
El camp comença buit. Els usuaris han de seleccionar activament una data. Ideal per a dates que varien molt.
La cita d'avui:
S'omple automàticament amb la data actual quan es carrega el formulari. S'actualitza dinàmicament cada dia.
Casos d'ús:
- Camps de "Data de la consulta"
- Formularis de marca de temps
- Documentació de la data actual
- Seleccions de la programació d'avui
Data de demà:
S'omple automàticament amb la data de demà. Perfecte per a reserves per a l'endemà.
Casos d'ús:
- Selecció de lliurament l'endemà
- Reserves de cites per demà
- Valors predeterminats d'esdeveniments futurs
- Disponibilitat l'endemà
Data específica personalitzada:
Trieu qualsevol data fixa per preseleccionar. Ideal per a dates suggerides o formularis específics d'esdeveniments.
Casos d'ús:
- Data de cita recomanada
- Valors predeterminats de la data de l'esdeveniment
- Suggeriments de terminis
- Dates de sol·licitud preomplertes
📱 Selector de calendari natiu
Selecció de dates optimitzada per al navegador:
Utilitza entrades de data natives d'HTML5 amb el selector de calendari integrat del navegador. Ofereix una experiència familiar i específica de la plataforma.
Aspecte específic de la plataforma:
- iOS: Selector de roda preciós
- Android: Calendari de disseny de materials
- Chrome per a escriptori: calendari desplegable
- Safari d'escriptori: selector compacte
- Tots optimitzats per a la seva plataforma
Beneficis:
- No cal cap biblioteca de JavaScript
- Càrrega instantània
- Accessible per defecte
- Navegable amb teclat
- Optimitzat per al tacte
- Mida mínima del fitxer
Feu clic a qualsevol lloc:
Es pot fer clic a tot el camp per obrir el calendari. Una àrea d'interacció gran millora la usabilitat.
✅ Validació intel·ligent de dates
Capes de validació integrades:
Validació de format:
El navegador garanteix automàticament el format de data correcte. Els usuaris no poden introduir dates no vàlides com ara "2023-13-45".
Validació de rang:
Dates mínimes/màximes aplicades al nivell del selector. Les dates no vàlides estan desactivades; no es poden seleccionar.
Validació lògica:
Restriccions de passat/futur/cap de setmana aplicades automàticament. El sistema impedeix les seleccions no vàlides.
Esborra els missatges d'error:
Si els usuaris aconsegueixen evitar les restriccions, els missatges clars expliquen: "La data ha de ser posterior al 2024-01-01" o "La data ha de ser anterior al 2024-12-31".
🔀 Lògica condicional
Visibilitat del camp de data dinàmica:
Mostra o amaga els camps de data en funció d'altres valors del formulari. Mostra els camps de data rellevants només quan sigui necessari.
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 "Data preferida" només quan el tipus de reserva sigui igual a "Cita"
- Mostra la "Data de l'esdeveniment" quan el tipus d'esdeveniment no està buit
- Mostra la "Data de lliurament" quan el mètode d'enviament sigui igual a "Programat"
- Amaga la "Data de retorn" quan el tipus de bitllet sigui "Anada"
🎯 Experiència d'usuari millorada
Funcions intel·ligents integrades:
- Visualització de la data: la data seleccionada es mostra en un format llegible
- Icona de calendari: indicador visual del selector de dates
- Navegació del teclat: les tecles de fletxa naveguen pel calendari
- Accessibilitat de les pestanyes: compatibilitat completa amb el teclat
- Optimitzat per al tacte: objectius tàctils grans en dispositius mòbils
- Correcció automàtica: les dates no vàlides s'ajusten automàticament a la data vàlida més propera
- Ressaltat d'avui: data actual ressaltada al selector
- Selecció ràpida: feu clic a la data i el selector es tanca automàticament.
- Suport de text d'ajuda: afegir consells o instruccions sobre el format de data
- Validació obligatòria: feu que la selecció de data sigui obligatòria
- Classes CSS personalitzades: aplica estils personalitzats
- Suport d'accessibilitat: etiquetes ARIA, compatible amb lectors de pantalla
Configuració senzilla en 3 passos
Prepareu el vostre camp de data en qüestió de minuts
Afegeix un camp de data
Arrossegueu i deixeu anar el camp Data de la secció Camps bàsics al formulari.
Trieu el format i l'interval
Seleccioneu el format de data (EUA, Regne Unit, ISO), definiu opcionalment els límits de data mínims/màxims i activeu el bloqueig de passats/futurs/caps de setmana segons calgui.
Estableix la data predeterminada
Trieu si el camp comença en blanc, s'omple prèviament amb avui, demà o una data personalitzada que especifiqueu.
🎉 Això és tot! El camp de data ja està a punt amb validació intel·ligent i selectors nadius.
Aplicacions del món real
Reserva de Cites
* Dates de les visites mèdiques
* Programació de consultes
* Selecció de cita de servei
* Coordinació de la data de la reunió
Registre d'esdeveniments
* Dates d'assistència a l'esdeveniment
* Selecció de la data del taller
* Registre a la conferència
* Dates d'inscripció a les classes
Lliurament i enviament
* Dates de lliurament preferides
* Selecció de la data d'enviament
* Programació de la data de recollida
* Planificació de la data d'enviament
Aplicacions empresarials
* Dates límit del projecte
* Dates de lliurament de les tasques
* Dates d'entrada en vigor del contracte
* Dates d'inici/finalització del contracte
Informació Personal
* Recollida de la data de naixement
* Dates d'aniversari
* Data d'inici de la feina
* Dates de finalització de l'educació
Reserves
* Dates d'entrada a l'hotel
* Dates d'inici del lloguer
* Dates de confirmació de la reserva
* Selecció del període de reserva
Opcions de camp completes
Configuració bàsica
- Etiqueta del camp: el títol que es mostra a sobre del camp de data
- Descripció/Text d'ajuda: guia addicional per als usuaris
- Camp obligatori: fes que la selecció de data sigui obligatòria
- Reservat: no aplicable per a selectors de dates nadius
Format de data
- Com mostrar les dates:
- Any primer: 31/12/2023 (ISO 8601)
- Primer mes: 31/12/2023 (estil EUA)
- Primer dia: 31/12/2023 (estil Regne Unit)
- Primer dia amb guions: 31-12-2023
Restriccions d'interval de dates
- Primera data permesa: la data més primerenca que els usuaris poden seleccionar (deixeu-ho en blanc si no hi ha límit)
- Última data permesa: l'última data que els usuaris poden seleccionar (deixeu-ho en blanc si no hi ha límit)
Opcions de bloqueig de dates
- Bloqueja les dates passades: impedeix seleccionar dates anteriors a avui.
- Bloqueja les dates futures: impedeix seleccionar dates posteriors a avui.
- Sense selecció de cap de setmana: impedeix seleccionar dissabtes i diumenges
Selecció de la data d'inici:
- Sense data preseleccionada (en blanc): el camp comença buit
- Data d'avui: data actual preemplenada
- Data de demà – L'endemà preomplert
- Data específica (vostè tria) – Data personalitzada preemplenada
Data predeterminada personalitzada: tria la data d'inici (es mostra quan se selecciona "Data específica")
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
- Camp ocult: fes que el camp sigui invisible però inclou la data als enviaments
- Classes CSS personalitzades: aplica estils personalitzats
- Atributs d'accessibilitat: etiquetes ARIA per a lectors de pantalla
Per què escollir el nostre camp de data?
✅ Formats múltiples: formats dels EUA, del Regne Unit, ISO i amb guions
✅ Control de l'interval de dates: estableix els límits mínims/màxims amb precisió
✅ Bloqueja les dates passades: només permet seleccions de dates futures
✅ Bloqueja les dates futures: només permet seleccions de dates passades
✅ Desactiva els caps de setmana: selecció només per a empreses en dies feiners
✅ Valors predeterminats intel·ligents: preomple amb avui, demà o una data personalitzada
✅ Selectors natius: calendaris optimitzats per a navegadors per a cada plataforma
✅ Validació automàtica: no es poden seleccionar dates no vàlides
✅ Totalment integrat: funciona perfectament amb totes les funcions del formulari
Preguntes freqüents
P: Quins formats de data són compatibles?
Quatre formats: ISO (2023-12-31), EUA (12/31/2023), Regne Unit (31/12/2023) i Dashed (31-12-2023). Trieu el format que millor s'adapti al vostre públic.
P: Com puc evitar que els usuaris seleccionin dates passades?
Activa "Bloqueja dates passades". Qualsevol data anterior a avui no es podrà seleccionar al selector de dates.
P: Puc limitar les dates a un interval específic?
Sí. Definiu la "Primera data permesa" i la "Última data permesa" per restringir les opcions a una finestra definida.
P: Què fa “Disable Weekends”?
Elimina els dissabtes i diumenges de la selecció. Només queda disponible de dilluns a divendres.
P: Com funcionen les dates predeterminades?
Trieu si el camp comença buit, mostra la data d'avui, la data de demà o una data personalitzada. Avui i demà s'ajusten automàticament.
P: El selector de dates té el mateix aspecte en tots els dispositius?
No. Utilitza la interfície d'usuari nativa de cada dispositiu: selectors de roda d'iOS, calendaris d'Android, selectors d'escriptori, etc.
P: Puc bloquejar dates futures per als camps de data de naixement?
Sí. Activeu "Bloqueja dates futures" perquè els usuaris només puguin triar dates fins a avui inclòs.
P: Com funcionen conjuntament les dates mínimes/màximes amb el bloqueig de passat/futur?
S'apilen. Per exemple, bloquejar dates passades més una data màxima de 30 dies per endavant dóna com a resultat un interval que va des d'avui fins a 30 dies per endavant.
P: Els usuaris poden escriure dates en comptes d'utilitzar el selector?
Alguns navegadors permeten escriure amb validació. D'altres forcen el selector de data. Tots imposen un format correcte.
P: Què passa si un usuari selecciona un cap de setmana quan els caps de setmana estan desactivats?
El sistema s'ajusta automàticament al dia laborable vàlid més proper, normalment el dilluns següent.
P: Puc utilitzar la lògica condicional amb camps de data?
Sí. Feu servir comparacions com ara "Igual a", "És buit", "No és buit", "Més gran que" o "Menor que" per controlar la visibilitat d'altres camps.
P: Com puc establir una data límit?
Introduïu la data límit a "Última data permesa". Els usuaris no poden seleccionar dates posteriors a aquest punt. Combineu-ho amb "Bloqueja dates passades" si només necessiteu disponibilitat futura.
