En Kaira necesitábamos un calendario que fuera bonito, de código libre y lo más importante ¡Que no usara jQuery!
Así que después de buscar muchos encontramos el definitivo ¡EpochPrime! así que vamos paso por paso a mostrar como se configura.
1º Descargarmos desde la web de Autor
Podemos descargarlo desde aquí.
2º La estructura
Consta de un .css y de un .js el resto es un .html para que veas como se utiliza.
Es muy fácil de añadir a tu proyecto, pero como siempre, necesitábamos algo un poquito mejor y modificado, así que ¡Manos a la obra!.
3º La modificación: Lo visual
El primer problema con el que nos topamos es que estaba todo en Inglés por lo que entramos en el .js y modificamos todo al castellano. Las líneas que hay que modificar son las primeras, la que están dentro de la función setLang().
Bien, ahora ya tenemos nuestro calendario en Castellano, pero… ¡Falla algo! Los Americanos tienen la costumbre de usar el foramto mm/dd/yyyy mientras los europeos dd/mm/yyyy ¡Así que toca modificar! Además que la semana en America empieza el Domingo y en España el Lunes. Así que en la función calConfig() buscamos las líneas:
self.startDay=0;
self.defDateFormat = ‘m/d/Y’;
y la cambiamos por
self.startDay=1;
self.defDateFormat = ‘d/m/Y’;
Y ya que estamos en esa función nosotros hemos cambiado los límites de las fechas puesto que el JS ya tiene unos cuantos años.
4º La modificación: El código y el rendimiento
Cuando os miráis el código por primera vez (el .html) veis que hay bastantes líneas de javascript que no están dentro del .js, esto pasa también con el CSS.
Así que para que nuestra aplicación sea más rápida meteremos el css dentro del .css y vemos que el javascript no se puede meter así como así puesto que tiene la siguiente línea:
dp_cal = new EpochPrime(document.getElementById(‘texto1’),dp_xml);
Esta línea lo que hace es que hace aparecer el calendario al pulsar en el input con id texto1, pero como es muy lógico que en ocasiones tengamos 2 lugares donde queramos hacer aparecer el calendario pues pensamos en lo de duplicar la línea y añadir el otro ID, total el .js solo se cargaría una vez y se mantendría en cache, pero al final pensamos que no es una buena idea puesto que cuando no existiera dicho ID, acabaría arrojando errores y retrasando ‘un poquito la página’. Así que lo que hicimos no fue más que añadir un if en el .js que mirase si existía el id (texto2) y si existe que añada la segunda línea.
También podéis hacer que se cargue solo si el form tiene el ID que queréis, eso ya es cosa vuestra.
Y así tendremos nuestro calendario, en español, con el formato europeo y más funcional 