Sistema de Calendario y Selección de Fechas

¿Qué hace Sistema de Calendario y Selección de Fechas?

Propósito

El Sistema de Calendario y Selección de Fechas proporciona una metodología para diseñar interfaces que permitan a los usuarios seleccionar fechas únicas, rangos de fechas o franjas horarias específicas. Seleccionar fechas es una tarea de alta fricción que implica modelos mentales complejos (por ejemplo, "el próximo martes", "el último fin de semana del mes"). Este sistema garantiza que los selectores de fecha sean visualmente claros, fáciles de navegar mediante teclado y táctil, y que proporcionen retroalimentación inmediata sobre la validez y disponibilidad.

Casos de Uso

• Reservas y Booking: Selección de fechas de entrada/salida para hoteles o vuelos.
• Programación: Elección de una franja horaria para una reunión, cita o entrega.
• Analítica e Informes: Definición de un rango de fechas personalizado (Fecha de inicio a Fecha de fin) para filtrado de datos.
• Ingreso de Fecha de Nacimiento: Captura de la fecha de nacimiento para verificación de edad o configuración de perfil.
• Planificación de Eventos: Gestión de plazos o hitos en una herramienta de gestión de proyectos.

Cuándo NO Usarlo

• Fechas Sencillas: Si solo necesita una fecha única y conocida (como "Hoy" o "Ayer"), use un botón o enlace simple.
• Fechas Memorables: Para fechas que los usuarios saben de memoria (como cumpleaños o vencimiento de tarjetas de crédito), use entradas de texto estándar con type="number" o type="tel" en lugar de una cuadrícula de calendario, ya que son más rápidas de escribir que de navegar en una cuadrícula.
• Tiempo Relativo: Si el usuario solo necesita seleccionar "Últimos 7 días" o "Este mes", use un menú desplegable o un grupo de botones en lugar de un calendario completo.

Entradas

1. Modo de Selección: Fecha única, Rango de fechas o Franja horaria.
2. Restricciones: Fechas mínimas/máximas, fechas inhabilitadas (por ejemplo, fechas pasadas, slots completamente reservados).
3. Contexto: ¿Es un elemento de página independiente o un disparador de popover/modal?
4. Localización: Formatos de fecha regionales (MM/DD/AAAA vs DD/MM/AAAA) y primer día de la semana (domingo vs lunes).

Salidas

1. Especificación de Anatomía de Cuadrícula: Definición visual del encabezado del mes, etiquetas de días de la semana y celdas de día.
2. Matriz de Estados: Tratamientos visuales para Hoy, Seleccionado, Inicio-de-Rango, Fin-de-Rango, En-Rango, Hover e Inhabilitado.
3. Especificación de Conexión de Entrada: Cómo se relaciona el calendario con el campo de entrada de texto (icono de activación, formato y soporte de entrada manual).
4. Plan de Accesibilidad: Atajos de teclado (Flechas, Intro, Escape) y regiones ARIA en vivo para actualizaciones de estado.

Flujo de Trabajo

1. Seleccionar el Patrón de Entrada

Elija cómo el usuario introduce la fecha:

• Entrada Directa: Entrada de texto con máscara. Mejor para entrada rápida de fechas conocidas.
• Disparador Selector: Una entrada con un icono de calendario que abre una superposición. Estándar para la mayoría de los casos de uso.
• En Línea/Persistente: El calendario siempre está visible en la página. Mejor para tareas con mucha programación.

2. Diseñar la Cuadrícula del Calendario

Establezca un ritmo espacial consistente para la vista mensual:

• Encabezado: Mes y Año con botones de navegación "Anterior" y "Siguiente".
• Fila de Días de la Semana: Etiquetas de una letra o cortas (D, L, M...) para orientación rápida.
• Cuadrícula de 7 Columnas: Asegúrese de que cada celda de día tenga suficiente espacio para la fecha y posibles indicadores de estado (por ejemplo, un punto para un evento).

3. Definir la Lógica de Rango (Si Aplica)

Al seleccionar un rango, la interfaz debe rastrear tres estados:

• Selección de Inicio: La primera fecha en la que se hace clic.
• El "Tramo": La conexión visual entre el inicio y la posición actual del hover.
• Selección de Fin: La segunda fecha en la que se hace clic, finalizando el rango.
• Retroalimentación Visual: Use un relleno de fondo sutil para las fechas "En Rango", con formas distintas o mayor contraste para los extremos de "Inicio" y "Fin".

4. Diseñar para Accesibilidad

• Navegación por Teclado: Los usuarios deben poder moverse entre los días usando las teclas de Flecha, cambiar de mes con RePág/AvPág y seleccionar con Intro.
• Gestión de Foco: Cuando se abre el selector, el foco debe moverse a la fecha seleccionada actualmente o a "Hoy".
• Roles ARIA: Use role="grid" para el calendario, role="columnheader" para los días de la semana y role="gridcell" para los días. Use aria-selected="true" para la selección activa.

5. Planificar Adaptaciones Responsivas

• Vista Móvil: En pantallas pequeñas, una vista de un solo mes suele ser la mejor. Para selección de rangos, considere apilar dos meses verticalmente o usar una superposición de pantalla completa.
• Objetivos Táctiles: Asegúrese de que cada celda de día tenga al menos 44x44px o proporcione un relleno adecuado para evitar clics accidentales.

Reglas de Decisión

• La Regla "Escribir Primero": Permita siempre que los usuarios escriban la fecha manualmente en el campo de entrada. No los obligue a usar el calendario.
• Límites de Mes: Si se selecciona una fecha muy pasada o futura (por ejemplo, más de 5 años), proporcione un selector desplegable de Año/Mes en lugar de obligar al usuario a hacer clic en "Siguiente" docenas de veces.
• Retroalimentación Inmediata: Si un usuario selecciona una fecha no válida (por ejemplo, un domingo para una entrega solo entre semana), muestre un mensaje de error contextual inmediatamente, en lugar de esperar al envío del formulario.
• Inicio de Semana: Predetermine según la configuración regional del usuario (normalmente domingo en EE. UU., lunes en Reino Unido/UE).

Restricciones

• Accesibilidad: Debe cumplir con el contraste AA de WCAG (4.5:1) para todos los estados de fecha. Las fechas seleccionadas deben distinguirse por algo más que el color (por ejemplo, un fondo sólido vs. sin fondo).
• Responsividad: Los calendarios nunca deben desbordar el viewport. Los selectores emergentes deben usar lógica de "giro" para permanecer visibles si no hay espacio debajo de la entrada.
• Localización: Soporte de diferentes formatos de fecha y traducciones para nombres de meses y días.

Patrones de Falla Comunes

• El "Clic Infinito": Obligar a los usuarios a hacer clic a través de 12 meses para encontrar una fecha en lugar de proporcionar un selector de año.
• Entrada Oculta: Impedir que los usuarios escriban la fecha, lo que frustra a los usuarios avanzados y a aquellos con discapacidades motoras.
• Objetivos Pequeños: Diseñar una cuadrícula con celdas de 20px que es imposible de usar en un dispositivo móvil.
• Falta de Contexto "Hoy": No resaltar la fecha actual, lo que dificulta que los usuarios se orienten.
• Rangos Confusos: No distinguir claramente entre el "Inicio" y el "Fin" de un rango, o no mostrar el tramo "En Rango".

Criterios de Validación

• Los usuarios pueden navegar por el calendario y seleccionar una fecha usando solo el teclado.
• La entrada de texto manual es compatible y se valida en el campo de entrada.
• La fecha de hoy es visualmente distinta pero no compite con la selección.
• Las selecciones de rango tienen un tratamiento visual claro de "Inicio", "Fin" y "Tramo".
• Los objetivos táctiles para las celdas de día cumplen con la recomendación de 44x44px (o mínimo 24x24px con espaciado).
• Las relaciones de contraste para todos los estados (Hover, Seleccionado, Inhabilitado) cumplen con WCAG AA.
• El calendario adapta su diseño (o se mueve a pantalla completa) en dispositivos móviles.