JQuery - Datepicker doble y enlazados

   
Vista:

Datepicker doble y enlazados

Publicado por Diego (8 intervenciones) el 06/01/2016 22:12:20
Buenas tardes. Tengo una consulta, necesito utilizar dos datepicker enlazados, los clasicos Desde - Hasta, ahora bien, el Hasta depende de la fecha del Desde, ya que debería estar habilitado con la fecha de inicio + 1 dia. Ahora al elegir la fecha Desde el segundo datepicker me inhabilita las fechas anteriores pero inicia desde la fecha seleccionada en el primero y deberia ser esa fecha mas un día, y como es para un hotel la fecha de entrada y salida no puede ser la misma, la idea es restringir al maximo el error en la carga sin necesidad de escribir mas codigo manejando las fechas y los posibles errores. El código básico es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Reservas</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="js/datepicker-es.js"></script>
<script>
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
firstDay: 1,
});
});
</script>
<script>
$(function () {
$("#from").datepicker({
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
 
</head>
 
<body>
<p>
Desde:
<input type="text" id="from" name="from" />
Hasta:
<input type="text" id="to" name="to" />
</p>
</body>
</html>


La linea <script src="js/datepicker-es.js"></script> puede ser obviada, yo la tengo porque está traducido el calendario al español.

Saludos y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Datepicker doble y enlazados

Publicado por xve (557 intervenciones) el 07/01/2016 08:59:46
Hola Diego, lo que tienes que hacer, simplemente es aumentar en uno el día inicial, verdad?

He modificado un poco tu código para que quede así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function () {
	$("#from").datepicker({
		onClose: function (selectedDate) {
			// Aumentamos en 1 el dia inicial
			selectedDate=new Date(selectedDate);
			selectedDate.setDate(selectedDate.getDate() + 1);
 
			$("#to").datepicker("option", "minDate", selectedDate);
		}
	});
	$("#to").datepicker({
		onClose: function (selectedDate) {
			$("#from").datepicker("option", "maxDate", selectedDate);
		}
	});
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Datepicker doble y enlazados

Publicado por Diego (8 intervenciones) el 07/01/2016 14:02:03
Hola xve, gracias por tu respuesta. Probé el código pero no funciona. La idea es que si en el Desde (#from) se selecciona digamos el 15/01/2016 cuando se haga click en el Hasta (#to) el calendario tenga habilitado sólo del 16/01/2016 en adelante. Tiene que ver con el minDate, pero las pruebas que hice no me funcionaron. Deberia ser algo como minDate +1...pero me da cualquier cosa.
Probé el código que me sugeriste, pero no sólo no da el resultado que busco sino que me habilita todas las fechas en el Hasta, cosa que al omitir esas lineas no pasa.
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Datepicker doble y enlazados

Publicado por xve (557 intervenciones) el 07/01/2016 22:53:09
Hola Diego, a mi me ha funcionado...

Prueba a poner un
1
alert(selectedDate);
haber que valor te da...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Datepicker doble y enlazados

Publicado por Diego (8 intervenciones) el 08/01/2016 03:54:40
Quizás yo no me estoy explicando bien. Si yo agrego alert(selectedDate); lo único que logro es que me diga que día estoy seleccionando, yo necesito otra cosa....Supongamos que hoy es 15/01/2016. Al hacer click en Desde se despliega el datepicker y me muestra habilitado desde el día 15/01/2016 en adelante. Hasta ahí lo tengo bien. Supongamos que elijo como fecha inicial 18/01/2016. Al hacer click en Hasta se despliega el segundo datepicker y me muestra habilitado desde el 18/01/2016, dándome la opción de elegir el mismo dia que en el primero, cosa que quiero evitar. Yo lo que necesito es que al desplegarse el segundo me habilite los días a partir del 19/01/2016, es decir de la selección del primero mas un día. Espero haber sido mas claro.
Saludos xve y gracias por tu tiempo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Datepicker doble y enlazados

Publicado por Diego (8 intervenciones) el 10/01/2016 16:05:13
Solución encontrada. Comparto el código, funciona perfecto. Trabaja con dos datepicker (from - to) el segundo (to) suma un día a la seleccion del primero (from) y el primero (from) resta un día si se selecciona primero el segundo (to).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function () {
$('#from').datepicker({minDate: 0, onSelect: function(dateStr) {
      var date = $(this).datepicker('getDate');
      if (date) {
            date.setDate(date.getDate() + 1);
      }
      $('#to').datepicker('option', 'minDate', date || 1);
}});
$('#to').datepicker({minDate: 1, onSelect: function(dateStr) {
      var date = $(this).datepicker('getDate');
      if (date) {
            date.setDate(date.getDate() - 1);
      }
      $('#from').datepicker('option', 'maxDate', date);
}});
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar