Aprendiendo jQuery con la web del Senado, IV

Hoy aprenderemos:

  • Qué es jQuery UI y a buscar su API.
  • A usar un objeto Date.
  • A crear elementos con jQuery.

Código inicial

Me llama la atención que, a pesar de que las variables year, txt_month y month son independientes del elemento de la colección, los está recalculando en cada iteración. Saquémoslos fuera, y hagamos unas pequeñas modificaciones.

¡Hop! ¡Hecho!

jQuery UI

jQuery User Interface es una colección de elementos orientados hacia la interfaz de usuario basados en jQuery. Entre otras cosas, la web del Senado usa jQuery UI para el selector de fechas.

Captura de la sección Actividad parlamentaria,

También recalcar que estamos en la sección Actividad parlamentaria. Este plugin también se usa en la página principal, pero el código se refiere a éste en concreto, por lo que trabajaremos aquí.

La página del datepicker en jQuery UI contiene varios ejemplos. Sin embargo, ahora mismo es más interesante mirar su API (al fin y al cabo, está en un enlace bien grande y tentador).

Veréis, no había usado nunca el selector de fecha de jQuery UI hasta leer el código. Sin embargo, me parecía raro que no tuviese un método que devolviese la fecha seleccionada (llamadme loco). Y, en efecto, allí estaba. El método llamado getDate.

Por lo tanto, simplemente llamamos a ese método para obtener la fecha, como vemos a continuación.

Puede parecer un poco rara la forma de llamar a los métodos, pero pensad que así es más difícil pisar los nombres de otros plugins.

Para obtener el mes y el año, primero debemos indagar un poco más en el objeto Date de js.

Fechas

Una pequeña anécdota, trabajando en una gran cárnica consultora, me encontré con un código de cerca de 30 líneas de js para comparar fechas. El tipo que lo escribió me pidió ayuda para solucionar un problema, puesto que no le funcionaba la comparación para un par de fechas. El fallo ocurrió en producción.

Bien, el problema se soluciona fácilmente comparando las fechas directamente (date1 < date2, por ejemplo). Lo podéis comprobar en el siguiente fiddle.

En nuestro caso queremos conseguir el año y el mes.

Año

Los objetos Date tienen dos métodos para obtener el año, getYear y getFullYear. El primero, obsoleto, devolvía el número de años desde 1900 (WTF?); el segundo, devuelve el año completo. Por lo tanto, es lo que usaremos para obtener el año.

Mes

El siguiente paso es obtener el mes. El método getMonth devuelve el índice del mes. Así enero es 0, febrero es 1 y así hasta diciembre que es el 11.

El código original coge el texto del mes y recorre los options correspondientes para conseguir el valor del option seleccionado. Lo curioso es que se podrían haber ahorrado el bucle si en vez de llamar a text hubiesen llamado a val. jQuery hace que la llamada a val en el select sea el valor de la opción elegida (en el caso de que la selección sea múltiple, devuelve un array con los valores). Sin embargo, val devuelve una cadena de texto, por lo que no nos ahorraríamos el parseo.

Si nos fijamos en el select, los valores de los options se corresponden con los índices que devuelve método (salvo, por supuesto, que uno son textos y otros son números).

Options de los meses en el calendario.

Finalmente, el código queda así:

Creando elementos con jQuery.

Por último, el script crea un elemento y lo pone dentro del elemento correspondiente a la iteración.

Si a la función jQuery le pasamos una cadena con html, ésta crea los elementos por nosotros. Además, podemos encadenar funciones en jQuery. La diferencia se puede ver en el siguiente gist:

Para terminar, usaremos appendTo para añadir un elemento como hijo a otro. Además, usaremos empty para eliminar cualquier texto anterior (y nodo hijo) del elemento correspondiente.

El código queda así:

Notas finales

El resto de la semana hablaré un poco de los eventos, que ya va siendo hora. Además, veremos cómo es aconsejable declararlos ahora (en el script anterior usaba la función click).

Author: Serabe

Mathematician, and Ruby and JavaScript programmer. Sometimes I speak at conferences and local meetups.

Leave a Reply

Your email address will not be published. Required fields are marked *