Contenido
Definición
Campo abierto en el que se puede introducir una fecha. Opcionalmente, puede incluir un asistente que facilita la selección de una fecha concreta dentro de un calendario emergente. Se utiliza en buscadores, formularios de contacto, cuadros de mando...
Anatomía
Las partes del componente son:
- Etiqueta: Breve texto que recoge el contenido que se debe introducir en el campo. Si el campo es obligatorio, se incluirá un asterisco junto a la etiqueta.
- Campo: Contenedor en el que la persona usuaria introduce la fecha. Una vez relleno, puede tomar un color de la paleta de estados en función del resultado de la validación.
- Sugerencia: En los campos de fecha recoge el formato de entrada de los datos (p.ej. dd/mm/aaaa).
- Activador de asistente (opcional): Al interactuar con él, activa el asistente de selección de fecha.
- Mensaje de aprobación o error (opcional): Aparece tras desactivarse el foco en el campo, y avisa sobre si el valor introducido es correcto. Toma el color de la paleta de estados.
- Asistente de calendario (opcional): Elemento emergente que permite seleccionar una fecha en un calendario interactivo.
- Controles de mes y año: Permiten modificar rápidamente el año y mes que se muestra y avanzar o retroceder un mes mediante las flechas de desplazamiento
- Día de la semana: Informativo
- Día del mes: Al seleccionar un día, el campo se rellena con ese valor.
- Borrar: Elimina la fecha introducida previamente en el campo.
Tipos
Por defecto
Campo de fecha sencillo, sin asistente. La fecha se introduce con los métodos de entrada disponibles en el dispositivo (teclado, teclado virtual, voz...).
Con asistente
Campo de fecha con asistente que facilita la selección de una fecha concreta dentro de un calendario emergente.
Pautas de uso
Facilita el uso de los métodos de entrada disponibles
- Incluye en la sugerencia una explicación del formato de entrada de los datos.
- Utiliza siempre el formato de fecha DD/MM/AAAA. No utilices otros separadores ni modifiques el orden de los elementos (día, mes, año).
- Si incluyes un asistente, asegúrate de que la fecha se puede introducir con los métodos de entrada disponibles en el dispositivo de acceso (teclado, teclado virtual, voz...).
Controla los valores aceptables
- Si utilizas un asistente, configúralo para que solo permita introducir los valores aceptables en el contexto de la interacción. P.ej. si el campo sirve para pedir una cita, no permitas valores en el pasado ni en días en los que el servicio no esté disponible.
- Una vez que la persona usuaria ha terminado de rellenar el campo, valida que está correctamente relleno.
Incluye una etiqueta descriptiva
- Incluye una etiqueta clara, precisa y breve (idealmente no más de dos palabras).
Componentes relacionados
Similar a:
Relacionado con:
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)
Control de versiones
| Fecha | Versión | Notas |
|---|---|---|
| 20/03/2026 | 1.3 | Se incluyen definición y pautas de uso |