Cargando

Ir a contenido

X

 


Datepickers con jQuery UI

El ingreso de información en los campos de tipo fecha de los formularios en los sitios web pueden resultar confusos para los usuarios, sin embargo existen algunos plugins y complementos en la web que permiten integrar la funcionalidad de los Datepickers en nuestro sitio.


Escrito por el jul 07 2013 16:42 jquery ui datepickers jquery


Algunos de estos con una programación más complicada que otros o simplemente su implementación puede resultar bastante laboriosa, pero jQuery y su paquete de librerías nos brindan métodos para construir Datepickers de forma rápida y eficiente con un funcionamiento y diseño de última generación.

El método Datepicker()

El método de datepicker() cambia la apariencia del HTML añadiendo una nueva clase CSS, con esta modificación es agregado un calendario que se despliega en un elemento de tipo input, especificado anteriormente en la función Javascript.

El método datepicker() puede ser usado de dos formas distintas:

$(selector, context).datepicker (options)
$(selector, context).datepicker ("action", params)

Veamos un ejemplo sencillo del funcionamiento del mismo:
  • Agregamos las librerías de jQuery y los CSS a nuestro documento.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
  • Creamos nuestra función en Javascript e instanciamos el metodo del datepicker y asignándole el selector en el cual se desplegará.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
  • Y por último en el HTML agregamos el id=datepicker al input indicandole que su funcionamiento que cuando se haga click sobre el mismo modifique el css y despliegue el calendario.
Date: <input type="text" id="datepicker" />

Y quedaría de esta forma en nuestro navegador:

jquery-ui-datepickers.jpg


Aquí el código completo:

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

Veamos un ejemplo más avanzado en el cuál usaremos varias propiedades del método datepicker con cual validaremos rangos de fechas así como el número de calendarios a desplegar.
  • 1 - Primero incluimos los archivos necesarios:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

  • 2 - Instanciamos el método dos veces para dos campos de tipo input diferente, a los mismos les agregamos las opciones para validar que la fecha introducida en el segundo campo no sea mayor que la segunda, así como el número de calendarios que se desplegarán.

<script>
$(function() {
$( "#from" ).datepicker({
	 defaultDate: "+1w",
	 changeMonth: true,
	 numberOfMonths: 3,
	 onClose: function( selectedDate ) {
	 $( "#to" ).datepicker( "option", "minDate", selectedDate );
	 }
});
$( "#to" ).datepicker({
	 defaultDate: "+1w",
	 changeMonth: true,
	 numberOfMonths: 3,
	 onClose: function( selectedDate ) {
	 $( "#from" ).datepicker( "option", "maxDate", selectedDate );
	 }
});
});
</script>

  • 3 - Por último creamos nuestros input en el HTML con unas etiquetas para identificar los mismos.
[/indent]
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

Veamos como se vería en nuestro navegador:


jquery-ui-datepickers-2.jpg


Aquí les dejo el código completo para que lo prueben y hagan cambios a su gusto:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#from" ).datepicker({
	 defaultDate: "+1w",
	 changeMonth: true,
	 numberOfMonths: 3,
	 onClose: function( selectedDate ) {
	 $( "#to" ).datepicker( "option", "minDate", selectedDate );
	 }
});
$( "#to" ).datepicker({
	 defaultDate: "+1w",
	 changeMonth: true,
	 numberOfMonths: 3,
	 onClose: function( selectedDate ) {
	 $( "#from" ).datepicker( "option", "maxDate", selectedDate );
	 }
});
});
</script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
</body>
</html>
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 07 2013 16:42
  •   Actualizado jul 07 2013 16:51
  •   Visitas 3.8K
  •   Nivel
    Profesional