En busca del seleccionador de fechas perfecto

Es un tema que quizá suene tonto o un poco exagerado, pero, ¿se han puesto a imaginar cuántas formas hay actualmente de colocar un elemento de interfaz de selección de fechas? En inglés le llaman el date picker, y a pesar de que es un elemento que yo creo no es parte de los inputs más utilizados, es sin duda un elemento que ha evolucionado y se ha estancado en términos de diseño de interfaces.

En este post vamos a conocer algunos de los diseños sobre un date picker perfecto, qué tiene de malo algunos otros y en general cuál sería la recomendación si ustedes quieren implementar uno.

1. Entrada sencilla

Este es el diseño más austero que podemos encontrar, en donde sin mucho esfuerzo solo le damos al usuario la información de lo que queremos que coloque sobre un campo de texto sencillo. Muchas veces se combina con otra interfaz donde se muestra el calendario, pero en general es el que más vemos en diseños de interfaces. Lo que podría criticarle a este tipo de componente es que no hay una forma de estandarizar la ayuda que da. Es decir, la información en la imagen está en inglés, entonces para alguien que no entiende o incluso, que viene de otra cultura donde el inglés no es la opción ni primaria ni secundaria, las letras “yyyy” no dicen absolutamente nada. Otro problema es el orden de los componentes, ya que en muchos lugares primero va el mes, el día y el año, en otros el día, el mes y el año, o en este el año, el mes o el día. Dependiendo como nos enseñaron a escribir fechas es que cualquiera de las opciones puede servir pero no todas.

2. Lista desplegable

La segunda opción es una lista desplegable. Esta opción mejora y arregla los problemas de la entrada sencilla, es intuitiva y además permite segmentar las opciones a una lista previamente definida. Podríamos decir que el tiempo de llenar 3 campos es mayor a solo llenar uno, pero creo que es un precio justo para evitar malos entendimientos sobre qué dato colocar y saber si cumple o no con una restricción, ya que en el primer caso tendríamos que usar alguna máscara o código para validar el dato, y en este segundo no es necesario ninguno de los dos.

3. Calendario

El componente más complejo de realizar si es que partimos desde cero, pero una vez que lo tenemos bien configurado es quizá la forma más fácil de seleccionar una fecha. No solo porque es intuitivo sino que incluso para las pantallas móviles es la mejor opción para que el usuario elija una fecha. Las desventajas ya las comenté, hay muchas formas de implementar un date picker y dependiendo de si usas uno propio o de terceros quizá te encuentres uno muy sencillo o uno muy complejo.

4. Scrolling

El modelo de scrolling es la implementación del calendario para los dispositivos móviles, específicamente lo puedes encontrar de forma nativa en iOS y Android. El inconveniente de este componente es que no es útil para rangos de fecha muy en el pasado, porque el hacer scrolling cuando no nos da opción de colocar un año hace que sea cansado scrollear uno, dos, cinco años. Esta opción es para cuando necesitas colocar una fecha cercana, a lo mejor una semana de rango, pero no más, porque el usuario podría molestarse por repetir un gesto muchísimas veces para escoger una opción.