Tengo un buscador de reservas mediante un rango de fechas, check_in y check_out.
<label for="check_in"><b>Entrada:</b></label>
<input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">
<label for="check_out"><b>Salida:</b></label>
<input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>" disabled>
Muestro las fechas en el campo input
de tipo text
mediante la clase Datepicker.
Implementando sus librerías necesarias como son las siguientes:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Explico el mal funcionamiento del Datepicker.
De inicio, se muestra bloqueada check_out
debido a que es necesario SIEMPRE un check_in
, para poder tener un check_out
posteriormente.
Insertamos un check_in
(aparece seleccionado de un color azul el día actual), posteriormente se habilita check_out
, entonces elegimos un check_out
, aparecen disponibles las fechas posteriores al check_in
seleccionado anteriormente.
Pulsamos Buscar, y todo OK. Primera búsqueda... Bien.
Ahora volvemos a realizar una segunda búsqueda para encontrar resultados diferentes, aquí viene el error.
Aparece deshabilitado, como siempre, check_out
, hasta que elegimos un check_in
.
¡¡¡Error a continuación!!! Entonces cuando nos disponemos a seleccionar el check_out
, encuentro que puedo elegir CUALQUIER fecha, hasta fechas de 2004 o 2012, aquí el error.
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Reservar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var defaults = {
closeText: 'Cerrar',
prevText: '<Anterior',
nextText: 'Siguiente>',
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: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults(defaults);
$("#check_in").datepicker({
minDate: 0, //The value "0" means today (0 days from today).
onSelect: function(dateStr) {
var minDate = $(this).datepicker('getDate'); //Día actual.
if (minDate) {
//Se comprueba si existe una fecha de salida.
var maxDate = $("#check_out").datepicker('getDate');
if (maxDate && minDate < maxDate) {} else {
//Si existe una fecha de salida y es menor a la fecha de entrada.
minDate.setDate(minDate.getDate() + 1);
//Se cambia la fecha al día siguiente del seleccionado en la fecha de entrada.
$('#check_out').datepicker('setDate', minDate).
datepicker('option', 'minDate', minDate); //Día siguiente al actual en "check_out".
}
}
$('#check_out').change(); //Activar el evento "onchange".
$('#check_out').prop("disabled", false); //Se activa la fecha de salida.
}
});
$('#check_out').datepicker().on("input click", function(e) {
console.log("Fecha salida cambiada: ", e.target.value);
});
});
</script>
</head>
<body>
<div id="contenedor">
<div class="busqueda">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mibusqueda" id="mibusqueda" method="POST" class="form_buscar">
<h2>RESERVAR</h2>
<label for="check_in"><b>Entrada:</b></label>
<input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">
<label for="check_out"><b>Salida:</b></label>
<input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>" disabled>
<label for="personas"><b>Personas:</b></label>
<?php
echo "<select name='personas'>";
//Si la variable no existe, establecemos el valor por defecto.
if(!isset($_POST['personas'])){
$_POST['personas'] = 2;
}
for ($i=1; $i<11; $i++) {
if($i == $_POST['personas']){
echo "<option value='$i' selected='selected'>$i</option>";
}else{
echo "<option value='$i'>$i</option>";
}
}
echo "</select>";
?>
<div align="center">
<input type="submit" value="Buscar" name="buscar" id="buscar"><br/>
</div>
</form>
</div>
<div class="mostrar_cabanas">
<?php
//Aqui viene los datos cargados en la busqueda...
?>
</div>
</div>
</body>
</html>
Función calculoNoches:
function calculoNoches(){
var check_in = document.getElementById("check_in").value;
var check_out = document.getElementById("check_out").value;
var f1 = moment(check_in);
var f2 = moment(check_out);
var noches = f2.diff(f1, "days");
//Comprobación del número de noches.
if(noches <= 0){
document.getElementById("calculoNoches").innerHTML = "";
}else if(noches == 1){
document.getElementById("calculoNoches").innerHTML = "Estancia de una noche.";
}else{
document.getElementById("calculoNoches").innerHTML = "Estancia de "+noches+" noches.";
}
}
calculoNoches()
cuya definición no has incluido en la pregunta, por lo que no es posible determinar si el error viene de ahí. – wallek876 el 4 ene. 18 a las 10:14