Como se ha mencionado en entradas anteriores, jQuery cuenta con un modo de programación para facilitar la interacción en las páginas. Sin embargo, para realizar funciones específicas, requiere de plugins, para que sea posible.
Con la implementación de la librería UI de jQuery, podremos hacer muchas aplicaciones con unas cuantas líneas de código. Por lo anterior, [...]
Como se ha mencionado en entradas anteriores, jQuery cuenta con un modo de programación para facilitar la interacción en las páginas. Sin embargo, para realizar funciones específicas, requiere de plugins, para que sea posible.
Con la implementación de la librería UI de jQuery, podremos hacer muchas aplicaciones con unas cuantas líneas de código. Por lo anterior, ya no será necesaria la búsqueda de pesados plugins que alentan el desempeño de nuestras aplicación.
El selector de Fechas
Para este post, realizaremos una de las funciones básicas para jQuery UI, la de un selector de fechas completamente personalizable. Pero primero, necesitamos la interfaz y los templates para jQuery UI. Para hacerlo seguimos este enlace y posteriormente descargamos el archivo generado o de otra manera podemos bajar este tema ya que será el que utilizaremos en el post.
Lo más simple con jQuery
Ya que tenemos el archivo que bajamos comenzaremos por editar index.html. En este documento realizaremos 2 cambios.
- Creación del input para poder convertirlo en datepicker. Lo colocaremos justo después de que empieza el elemento <body>. Notemos que el input cuenta con un elemento llamado id, el cuál tiene un valor de 'fecha' y a partir de éste podremos hacer la programación.
- <input id="fecha" name="fecha" type="text" />
- Creación de las etiquetas <script> de javascript justo después de que incluimos jquery y UI
- <script type="text/javascript"></script>
- Ahora crearemos el código jQuery dentro de las etiquetas que se mencionaron en el paso anterior. Primero pondremos la función de la siguiente manera
- $(function(){
- $('#fecha').datepicker(); // ponemos el datepicker sin parámetros en el id "fecha"
- });
- Para seguir vamos a agregar algunas opciones como por ejemplo que se pueda cambiar el mes y el año además de ajustar el formato
- $(function(){
- $('#fecha').datepicker({
- 'changeMonth' : true, // cambiar el mes
- 'changeYear' : true, // cambiar el año
- dateFormat: 'yy-mm-dd' // formato
- }); // acaba el datepicker
- });
El resultado nos dará algo como lo siguiente
Más Información
El complemento datepicker de jQuery tiene muchas opciones y eventos, para la lista completa de éstos sigue este enlace.
Si tienes alguna duda del post, no dudes en dejar un comentario. Asímismo si tienes algún problema a la hora de escribir tu código describe tu problema para que te ayude a solucionarlo.
3 Responses
Hola.
Y si quiero que todos los datepicker lleven el formato dd-mm-yy en lugar de hacerlo uno por uno (voy a tener bastantes..) donde puedo establecer ese formato como el formato por defecto para todo..
He intentado en ui.datepicker.js pero los cambios q hago alli parecen no surtir efecto o se sobreescriben…
gracias por cualquier tip.
Es muy fácil, sólamente tienes que cambiar la opción dateFormat que se presenta en el código anterior, te quedaría:
$(function(){
$(‘#fecha’).datepicker({
‘changeMonth’ : true, // cambiar el mes
‘changeYear’ : true, // cambiar el año
dateFormat: ‘dd-mm-yy’ // formato
}); // acaba el datepicker
});
Hola , disculpen mi ignorancia, queria saber como cambiar el formato , me refiero a cambiarle imagenes y colores
gracias