Rango de Fechas con Javascript (Jquery, Jquery UI)
El objetivo es crear un formulario de reservas con un rango de fechas para elegir (fecha entrada, fecha salida).
Las características del rango de fechas serán:
- No se puede seleccionar como día de entrada un día menor que el actual.
- La fecha de salida será como mínimo un día mayor que la de entrada (no se puede entrar y salir el mismo día) y como máximo 365 días mayor que la fecha de entrada.
- Primero hay que seleccionar la fecha de entrada, por lo que la fecha de salida estará deshabilitada hasta hacerlo.
- El calendario está traducido al español.
Vamos a utilizar Jquery UI datepicker, hay algunas demos en:
http://jqueryui.com/demos/datepicker/
El primer paso es descargarnos el paquete JqueryUI desde:
http://jqueryui.com/download
Lo descomprimimos en una carpeta de nuestra web y añadimos en HEAD las rutas hacia los JS y CSS:
<link type="text/css" href="CARPETA/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="CARPETA/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="CARPETA/jquery-ui-1.8.16.custom.min.js"></script>
Después, añadimos (también en HEAD) el siguiente javascript:
<script type="text/javascript">
$(function ()
{
// Traducciones: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: 'Ant',
nextText: 'Sig',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
$('#r_fecha_entrada, #r_fecha_salida').datepicker({
beforeShow: customRange,
changeFirstDay: false,
minDate: 0,
onSelect : activateEndDate
});
$('#r_fecha_salida').attr("disabled", "disabled");
});
function activateEndDate(input) {
$('#r_fecha_salida').removeAttr("disabled");
}
function customRange(input) {
var dateMin = null;
var dateMax = null;
if (input.id == "r_fecha_salida")
{
dateMax = new Date();
if ($("#r_fecha_entrada").datepicker("getDate") != null)
{
dateMin = $("#r_fecha_entrada").datepicker("getDate");
dateMin.setDate(dateMin.getDate() + 1);
dateMax = $("#r_fecha_entrada").datepicker("getDate");
dateMax.setDate(dateMax.getDate() + 365);
}
return {
minDate: dateMin,
maxDate: dateMax
};
}
}
</script>
Para terminar, en BODY, creamos el formulario:
<form method="post" action="">
<label for="r_fecha_entrada">Fecha de Entrada</label>
<input type="text" id="r_fecha_entrada" name="r_fecha_entrada"/>
<label for="r_fecha_salida">Fecha de Salida</label>
<input type="text" id="r_fecha_salida" name="r_fecha_salida"/>
</form>
Comentarios
Buenisimo!!
He aprendido más en este tutorial que en cualquier manual que haya visto sobre datepicker.
Añadir nuevo comentario