Add Me!Close Menu Navigation
Add Me!Categorías abiertas del menú

Cómo utilizar un datepicker en jQuery

Hoy en día pocos somos los que utilizamos los clásicos y básicos Notepad (WIN) o TextEdit (MAC) para crear nuestros código, delegando la mayoría de funciones a editores web como Adobe Dreamwear, Zend Studio, Microsoft Visual Studio… los cuáles brindan además librerías que facilitan mucho nuestro trabajo.
Como ya te he comentado en muchas ocasiones, jQuery es una librería open Source rápida y concisa que simplifica el manejo de eventos, animaciones e interacciones AJAX para un rápido desarrollo.
Este framework ha cambiado la manera de interpretar Javascript. A continuación vamos a ver como trabajar con campos de fecha (DatePicker). Puedes descargar el código fuente desde aquí o ver desde aquí su funcionamiento.

1.- Creación del documento

Crea un documento HTML básico.

2.- Referencias

Referencia a los archivos JS y CSS necesarios desde la cabecera de tu página, dentro de la sección “head”.

<link rel="stylesheet" typePreview post="text/css" href="demos.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
 
<script src="jquery-1.5.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>

Puedes personalizar el archivo demo.css para modificar el aspecto y posicionamiento del datepicker.

3.- Crea el datepicker dentro del archivo HTML

En este paso deberemos crear un contenedor en el que usar el datepicker e inicializar el comportamiento. Para no andarnos con demasiados rodeos,te muestro cómo quedaría el código completo:

<html>
<head>
<title>Uso de fechas con JQUERY</title>
<!-- Archivos CSS -->
<link rel="stylesheet" type="text/css" href="demos.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
 
<!-- Archivos JS -->
<script src="jquery-1.5.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
 
<!-- Inicialización del script -->
<script>
$(function() {
   $( "#datepicker" ).datepicker();
});
</script>
</head>
 
<body>
<div style="width:500px; height:auto; font-size:small;">
   <div class="demo">
      <p>Selecciona la fecha: <input type="text" id="datepicker"></p>
   </div>
</div>
</body>
</html>

El resultado final será algo así:

4.- Ajustes de parámetros del DatePicker

Formato de fecha

Por defecto se muestran las fechas con el formato mes/dia/año. Veamos como modificarlo y adaptarlo al sistema “europeo”:

<script>
$(function() {
   $( "#datepicker" ).datepicker();
   $( "#format" ).change(function() {
      $("#datepicker").datepicker( "option", "dateFormat", $( this ).val() );
   });
});
</script>

jQuery puede trabajar con los siguientes formatos de fecha:

  • mm/dd/yy como 06/12/10
  • yy-mm-dd como 10-06-12
  • d M, y como 6 Jun, 10
  • d MM, y como 6 June, 10
  • DD, d MM, yy como Sunday, 6 June, 2010
  • ‘day’ d ‘of’ MM ‘in the year’ yy como day 6 of June in the year 2010

Para verlo, modifica tu fichero HTML adaptándolo a tus necesidades. En mi caso:

<p>Selecciona el formato de fecha a mostrar:
 
<select>
   <option value="mm/dd/yy">Default - mm/dd/yy</option>
   <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
   <option value="d M, y">Short - d M, y</option>
   <option value="d MM, y">Medium - d MM, y</option>
   <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
   <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the ye ar' yy</option>
</select>
 
</p>

El resultado será el siguiente:

Rango de fechas

Además pueden especificarse una fecha mínima y/o máxima (imagina un sistema de reservas de hotel, por ejemplo). Para ello deberemos definir las variables minDate y maxDate, pudiendo indicar meses, días…
Sirva el siguiente código como ejemplo, en la que la fecha mínima es de 40 días antes de la fecha actual y la fecha máxima será 2 meses y 5 días después:

<script>
$(function() {
   $("#datepicker").datepicker({minDate: -40, maxDate:"+2M +5D" });
});
</script>

Mostrar el datepicker

Hasta el momento el datepicker aparecía cuando el usuario clicaba sobre un textbox. Podemos mostrar el datepicker sin necesidad de que tenga que aparecer tras un click del user. Para ello:

Select the Date: <div></div>

Cuyo resultado:

DatePicker con desplegable de MES y AÑO

Para ello, procederemos de la siguiente manera:

<script>
$(function() {
   $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
   });
});
</script>

Cuyo resultado:

Posts Relacionados: 3 plugins SEO para WP que deberías conocer | 30 sitios donde descargar imágenes gratuitas | Formas de perder el tiempo posicionando webs | Qué hacer si Google te ha penalizado en su ‘last update’ | Menú de subnavegación (CSS+JQuery) | NounProject: Gran colección de iconos vectoriales | Reveal: Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets útiles que deberías conocer | Formulario en varios pasos usando jQuery |

11 comentarios to “Cómo utilizar un datepicker en jQuery”

  1. Dayb dice:

    Buenas

    gracias por el aporte, ya lo implementé en mi web pero necesito pasar el valor del input que contiene el datepicker a una variables php antes de enviar el formulario en el cual está.

    Muchas gracias

  2. soude dice:

    Hola, recien estoy aprendiendo jquery, disculpa si no tengo bien claras mis ideas, de donde sacaste los archivos:
    jquery-1.5.1.js
    jquery.ui.core.js
    jquery.ui.widget.js
    jquery.ui.datepicker.js
    estoy un poco perdida.

    • Luis dice:

      Hola Soude,
      cómo verás, al final del post hay un enlace con los archivos de descarga. Ahí está todo lo que necesitas.
      Un saludo ;)

  3. Luciano dice:

    Despues de mirar casi 1000 sitios en donde todo el mundo copia y pega al fin di con lo que buscaba! muy bueno gracias!

  4. pluk dice:

    Hola Luis, como pongo la fecha por defecto, quiero decir, si quiero poner 01/01/1980, lo coge bien? Muy buen trabajo!! Un saludo!

  5. pluk dice:

    Vale, ya lo he hecho… si quisiera optimizar un poquito los js, como tendría que hacerlo? puedo eliminar imagenes que no uso? me es muy importante el tema de optimizar…

    • Luis dice:

      Sí, es una opción. Otra sería eliminar lineas de código que no vayas a utilizar. Sin embargo, si utilizas jQuery, lo mejor es que referencíes al servidor de Google, por ejemplo. Si buscas en el blog, hay varias entradas que hablan sobre optimización de jQuery y javascript.

      Un saludo amigo!

  6. Victor dice:

    Buenas tardes, necesito saber como colocar el icono o un gif al lado del cuadro de texto de la fecha.
    Para que cuando le des al icono aparezca el calendario.
    Gracias por tu aporte.

Deja un comentario




Categorías