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:
Veamos un ejemplo sencillo del funcionamiento del mismo:
Y quedaría de esta forma en nuestro navegador:
Aquí el código completo:
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.
Veamos como se vería en nuestro navegador:
Aquí les dejo el código completo para que lo prueben y hagan cambios a su gusto:
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:
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:
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>
