Selector de fecha

Componentes

Selector de fecha

Los selectores de fecha ayudan a los usuarios a seleccionar y establecer una fecha o periodo específico.

Vista Previa

Figma

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

Visualización del componente selector de fecha en estado por defecto

Default

Visualización del componente selector de fecha en estado enfocado

Focus

Visualización del componente selector de fecha en estado rellenado

Filled

Visualización del componente selector de fecha en estado satisfactorio

Success

Error

Visualización del componente selector de fecha en estado deshabilitado

Disabled

Tipos de overlay date

Visualización del componente de panel desbordante para meses

Mes

Año

Visualización del componente de panel desbordante para días

Fecha

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.

Visualización del componente panel desbordante para móvil

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.