Sistema de diseño
Date picker
Este componente, también conocido como selector de fechas, es una herramienta que permite a los usuarios elegir una fecha específica o un rango de fechas en una aplicación o sitio web.
Figma
Storybook
AEM
Overview
Debe ser intuitivo y fácil de usar, con controles claros para seleccionar fechas. Además, debe permitir la navegación entre meses y años de manera eficiente, especialmente para elegir fechas en el pasado o futuro. También es importante que sea compatible con dispositivos táctiles, facilitando la selección tanto con un mouse como con una pantalla táctil.
Fragmentos que componen el Date Picker
Nombre
Descripción / Uso
Ejemplo
Default
Estado por defecto de las fechas, sin estar seleccionada ni ser el día actual en que se encuentra el usuario
Hover
Estado de interacción con el ratón
Selected
Estado seleccionado por el usuario
Today
Estado que muestra el día actual en que se encuentre el usuario cuando visualiza el Date Picker
Event
Estado que destaca un día porque hay datos ligados a esta fecha
Far day
Estado que muestra un día fuera de las fechas accionables
Variantes
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Filters
Cualquier elemento de filtrado que influya en el Date Picker debe colocarse en la parte superior del componente.
Select year
Al seleccionar un año nuevo, la vista vuelve a mostrar los días. Las flechas de navegación permiten desplazarse entre décadas.
Select month
Al seleccionar un nuevo mes, el calendario vuelve a la vista de días. Si se selecciona el año, se accede al selector de años.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes