Selección de fechas con datepicker y calendario

En esta entrada vamos a ver qué opciones tenemos para introducir fechas a un sistema. Además, veremos cómo diseñar y usar correctamente el selector de fecha, el componente UI adecuado para ello. 

Una regla que prevalece a todo lo que viene a continuación es que siempre es el contexto quien marca la adecuación de un sistema u otro. Sin embargo, por lo general lo que te cuento a continuación es lo más adecuado.

Date picker el selector de fecha

El date picker o selector de fecha es un componente similar al input de texto en cuanto a estética pero en el que se podrá escribir directamente la fecha o que activará y desactivará el componente calendario y este segundo es el componente web en el que se selecciona una fecha o rango de fechas como veremos en la siguiente sección.

Por otra parte también existen date pickers que no abren ningún calendario como es este caso de Behance sino que van en formato de lista desplegable. En estos casos muchas veces se obliga a seleccionar una opción de la primera columna para después permitir seleccionar de la segunda. Este formato muchas veces se utiliza cuando se espera que la información insertada vaya a ser una fecha muy lejana, como por ejemplo una fecha de nacimiento

En cuanto a la anatomía del date picker tradicional, el que abre el calendario, esta obliga a la incorporación del input para abrir el calendario que además sirve para poder escribir en ella la fecha que podrá ser más o menos completa. Fuera de eso, deja de forma opcional una etiqueta que sirva para pedir la inserción de la fecha.

Como vemos en la imagen, el componente proporciona la fecha en un formato específico. Por ello, es importante ayudar a los usuarios con el placeholder.

También podemos ver que está en formato americano, con el mes por delante del día. Por lo general los date pickers, igual que veremos después en los calendar, tienen por defecto el formato americano ya que es el más usado.

Sin embargo, es importante aplicar al técnica de la internacionalización o globalización (en inglés Internationalization) que consiste en adaptar el formato de fecha y hora en función de la ubicación si la conocemos. Siempre hay que intentar diseñar para la internacionalización.

Time Picker

El date picker ofrece una variante llamada time picker para seleccionar una hora en vez de una fecha.

El time picker puede ser más o menos restrictivo según queramos. Podemos limitarlo a la selección de horas exactas (16:00 o 17:00) o limitar la selección de horas a grupos de 15 minutos (por ejemplo las 16:15 pero no 16:20). También podemos dar más libertad y permitir seleccionar cualquier minuto o incluso segundo, aunque esto último en la mayoría de casos es más molestia que ayuda para los usuarios.

Otra cosa que podemos configurar en los date pickers es si el rango de horas diferencie entre AM y PM o si preferimos que el rango sea de 24h en lugar de 12h.

Finalmente, también podríamos incluso añadir un selector de zona horaria.

En cuanto a la anatomía, el time picker obligatoriamente tendrá el input para poner la hora y opcionalmente tendrá el resto de módulos que hemos comentado anteriormente y una etiqueta en la parte superior

¿Quieres saber más sobre componentes?

¡Descubre los Secretos del Diseño UX/UI! 🎨

Sigue a AprenderUXUI en LinkedIn para contenido casi casi diario sobre diseño UX / UI

¡Sígueme en LinkedIn ya! ➡

Calendar (Calendario)

Si nuestro datepicker o selector de fechas funciona con calendario, hay varias cosas que debemos tener en cuenta. ¡Veámoslas!

El calendario permite seleccionar y ver una sola fecha o un rango de fechas en su calendario. Se compone de 3 vistas diferentes: la vista del mes, la vista del año y la vista de la década.

• Mes: la vista que sale por defecto, aquí se puede seleccionar un día de ese mes o un rango de fechas de ese mes.
     
• Año, nivel superior a la vista del mes, aquí podremos ver la vista del año y seleccionar el mes al que queremos entrar o seleccionar
     
• Década, nivel superior a la vista anual en la que podremos seleccionar el año al que queremos entrar o seleccionar.
  

En cuanto a la anatomía del calendario hay varios estilos diferentes pero por lo general todos cumplen con este patrón de 3 elementos: botón para cambiar de vista; flecha para pasar a mes/año/década anterior o posterior y finalmente contenido para seleccionar.

Sin embargo, el componente calendar es bastante versátil y acepta muchos más añadidos, como paneles laterales para agilizar el cambio de meses / años / décadas o también acepta botones, los propios date pickers dentro del calendar en caso de que este se abra desde un botón diferente, etc.

De igual manera que vimos en el date picker, aquí notamos que el formato se corresponde con un formato internacional de días, es decir, el domingo aparece al principio de la semana y el sábado al final de esta. Esto es lo más común para webs de ámbito internacional pero nuevamente, para sitios pensados para usuarios hispanos, la mejor fórmula es adaptar el calendario al formato de semana que va de lunes a domingo.

Buenas prácticas del componente Calendar

Por otra parte, como vemos en los ejemplos, una muy buena práctica es señalar con un distintivo el día de hoy – en el que estamos – para que el usuario pueda centrarse rápidamente. Para ello, hay dos prácticas comunes. Bien rellenar de color la caja que contiene esta fecha o bien mostrar el perímetro de la caja con trazo. 

Del mismo modo, son buenas prácticas, para las situaciones en las que aplique, identificar las fechas bloqueadas (normalmente se hará rellenando el contenedor de color gris y cambiando a un gris oscuro el color de la letra) y las fechas de eventos especiales como por ejemplo días festivos. Esto se hace comúnmente cambiando el color de la fuente.

Más buenas prácticas en cuanto a los calendarios son:

• Escribir los números siempre como número y no como 1º, 2º, 3º… lo cual en español parece difícil pensar en esa posibilidad pero en inglés sí podríamos vernos tentados a escribir 1st, 2nd, 3rd…
     
• Bloquear a partir de la fecha mínima y de la fecha máxima. Es decir, si queremos limitar las fechas a elegir para estar entre el 1 de enero de 2022 y el 31 de diciembre de 2023, no permitiremos acceder a ningún otro año que no sea 2022 o 2023. Esto también puede aplicarse de forma parcial con lo que si solo queremos permitir fechas pasadas, no permitiremos navegar por años siguientes al año actual ni meses siguientes al presente dentro del año en curso. Además, los días que queden desde el día de mañana hasta completar el mes, estarán registrados como fechas bloqueadas.