[SOLUCIONADO] Datepicker

[alejandromaringomez]

Buenas noches ,

Tengo dos inputs con datepicker, y quisiera que en el segundo debas seleccionar a partir del día siguiente que hayas seleccionado en el primer input, ¿Cómo lo puedo hacer?.

Código:

$('div#module_rent div.box input#date_re').datepicker({
		
			minDate: '+1d',
			maxDate: '+12m',
			dateFormat: 'dd/mm/yy',
			showButtonPanel: true,
			onClose: function (selectedDate) {			
				$('div#module_rent div.box input#date_de').datepicker('option', 'minDate', selectedDate);		
			}
		
		});
			
		$('div#module_rent div.box input#date_de').datepicker({
			
			minDate: '+1d',
			maxDate: '+12m',
			dateFormat: 'dd/mm/yy',
			showButtonPanel: true,
			onClose: function (selectedDate) {
				$('div#module_rent div.box input#date_re').datepicker('option', 'maxDate', selectedDate);
			}
						
		});

Muchas Gracias :)

[Alexis88]

He leído que se pueden deshabilitar fechas del calendario a partir de un rango dado o mediante las propiedades minDate y maxDate, tal y como se explica aquí, pero, para tu caso, se me ocurre otra alternativa. Podrías seleccionar una fecha en el primer calendario y automáticamente asignar al segundo la fecha siguiente, pero si el usuario selecciona una fecha menor en el segundo calendario, se le muestra un mensaje en el que se le avisa que no lo debe de hacer y se le asigna, nuevamente, la fecha siguiente a la elegida en el primer calendario. Para darle mayor seguridad al proceso, inicialmente, el segundo calendario estaría deshabilitado y solo se habilitaría al momento se seleccionar una fecha en el primero.

Código HTML:

<input id = "foo" readOnly />
<input id = "bar" readOnly disabled />
 

Código Javascript:

var foo = $("#foo"),
    bar = $("#bar");
 
foo.datepicker({
    onSelect: function(){
        var fecha = $(this).datepicker("getDate");
        fecha.setDate(fecha.getDate() + 1); //Le sumo 1 día
        bar.datepicker("setDate", fecha);
        if (bar.prop("disabled")){
            bar.prop("disabled", false);    
        }
    }
});
 
bar.datepicker({
    onSelect: function(){
        var primero = foo.datepicker("getDate"),
            segundo = $(this).datepicker("getDate");
        if (segundo <= primero){
            alert("Debe de seleccionar una fecha mayor");
            primero.setDate(primero.getDate() + 1); //Le sumo 1 día
            $(this).datepicker("setDate", primero);
        }
    }
});
 

DEMO

Como la propiedad getDate devuelve un objeto Date, puedo realizar la comparación directamente y aplicar cualquiera de los métodos de dicho objeto.

Saludos

[alejandromaringomez]

Hola Alexis88 :) ,
Muchas gracias, verás, me pasó una web mi cliente, se ve que las ideas las cojer de allí, llevo tiempo mirando y ellos lo han conseguido hacer, su url es:

http://orlandorc.com/

Es el formulario del comienzo, la verdad que no consigo ver como lo hacer, muchas gracias y si pudieras ver como lo hacen para que quedara un poco más limpio te lo agradecería muchísimo :)

Un saludo :)

[diurno10]

En la pagina q te pasaron el flaco hace esto

Código Javascript:

$('#dpd1').datepicker({
    weekStart: 1,
    startDate: startDate,
    endDate: fechaFin, 
    autoclose: true,
    format: 'dd/mm/yyyy'
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        startDate.setDate(startDate.getDate()+1);
        ToEndDate = new Date(selected.date.valueOf());
        ToEndDate.setDate(ToEndDate.getDate(new Date(selected.date.valueOf())));
        ToEndDate.setDate(ToEndDate.getDate()+diasMax);
        $('#dpd2').datepicker('setStartDate', startDate);
        $('#dpd2').datepicker('setEndDate', ToEndDate);
        $('#dHoraRecogida').show();
        $('#fHoraRecogida').focus();
    });
 

[alejandromaringomez]

Hola diurno10 :)

Muchas gracias por la respuesta, sí, lo he visto, pero claro, ver se puede ver, otra cosa es entenderlo XD, y adaptarlo, ¿Cómo puedo adaptarlo al que tengo? ¿Podrías decirme que hace paso a paso?

Perdona si ando algo perdido, no sé mucho de jquery, sé pero no tanto, muchas gracias :)

[Alexis88]

Después de analizar el algoritmo utilizado en dicha página (que creo que fue lo primero que debiste poner ), he simplificado la manera en la que lo hacen:

Código Javascript:

var inicio = new Date(),
    fin = new Date(),
    inicio2, fin2;
 
fin.setDate(fin.getDate() + 365);
 
$("#foo").datepicker({
    minDate: inicio,
    maxDate: fin,
    onSelect: function(){
        inicio2 = $(this).datepicker("getDate");
        fin2 = $(this).datepicker("getDate");
        
        inicio2.setDate(inicio2.getDate() + 1);
        fin2.setDate(fin2.getDate() + 365);
        
        $("#bar").datepicker({
            minDate: inicio2,
            maxDate: fin2
        });
    }
});
 

Lo que hay que hacer es más simple de lo que parece. Primero, declaramos dos variables a las cuales les asignaremos a cada una el objeto Date y que, por defecto, toman la fecha de hoy, además, declaramos dos variables que usaremos más adelante. Luego, al valor de la fecha final para el primer calendario, le sumo 365 días, con lo cual, el usuario tendrá el rango de 1 año para seleccionar cualquiera de dichas fechas.

Enseguida, en el primer calendario, establezco los rangos de selección, utilizando las dos propiedades que mencioné en mi anterior respuesta, además, cuando seleccionemos una fecha, a las dos variables finales que declaré al inicio, les asigno la fecha que acabamos de seleccionar. A la primera de ellas, le sumo 1 un día y, a la segunda, 365, para que así la fecha final del alquiler sea como máximo igual a un año después de la fecha de inicio, es decir, la seleccionada en el primer calendario. Finalmente, asignamos estos dos datos al segundo calendario como sus rangos de selección.

DEMO

Saludos

[alejandromaringomez]

Hola Alexis :) ,

Perdona el descuido :S, se me pasó, he conseguido hacerlo y lo he comprendido :), muchas gracias por tu ayuda, me ha servido de mucho, y a demás ya tengo algo nuevo aprendido para próxima ocasión poder utilizarlo :)

Marco como solucionado.

Un saludo y muchísimas gracias :))