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>
Categoría: 

Comentarios

He aprendido más en este tutorial que en cualquier manual que haya visto sobre datepicker.

Web: 
http://www.google.com

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
Image CAPTCHA
Enter the characters shown in the image.