Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Selector de fecha
Selector de fecha
Los selectores de fecha ayudan a los usuarios a seleccionar y establecer una fecha o periodo específico.
Usos
Los selectores los utilizamos para mostrar fechas u horas pasadas, presentes o futuras. El tipo de fecha (exacta, aproximada, memorable) que solicita al usuario determinará qué selector es mejor utilizar.
Cuándo usar
Utilizamos el date pickers y horas cuando necesitamos que el usuario pueda decretar el horario o fecha concreta en un formulario.
Cuándo no usar
Usamos un marcador de posición o un asistente para mostrar cómo debe formatearse la entrada. Por ejemplo, "6/12/2020" representa fechas diferentes para estadounidenses y europeos.
Tanto los selectores de fecha como de hora deben ir acompañados de etiquetas.
Las etiquetas deben ser claras y descriptivas.
Las entradas de rango deben etiquetarse correctamente con una etiqueta de inicio y fin.
Comportamiento
Patrón del formato de la fecha
El formato de la fecha puede mostrarse de manera diferente dependiendo de su ubicación. Por ejemplo, algunos países usan mes/día/año mientras que otros usan día/mes/año.
d - Día del mes, completado con un dígito.
dd - Día del mes, completado con dos dígitos.
m - Mes, completado con un dígito.
mm - Mes, completado con dos dígitos.
aa - Año, completado con dos dígitos.
aaaa - Año, completado con cuatro dígitos.
Estado date picker - Input
Default
Focus
Filled
Success
Error
Disabled
Tipos de overlay date
Responsive
En su versión móvil, los Overlay Date aparecen como una modal, para mejorar la usabilidad y accesibilidad en este tipo de dispositivos.
Mobile
Accesibilidad
Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.
El date picker usa la propiedad input-label para un control accesible del componente.
El date picker incluye una entrada de fecha y un botón de alternar que abre un selector de calendario que se construye utilizando el componente modal. Este modal de apertura contiene un calendario que utiliza los componentes botones que permiten al usuario elegir una fecha específica.
La cuadrícula del calendario proporciona teclas de acceso rápido para cambiar el año y el mes, así como compatibilidad con las teclas de navegación normales de la cuadrícula.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
