Dispongo de un Datepicker para buscar entre dos fechas "x" información.
Os muestro mi 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="css/estilos_reservar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="js/calculoNoches.js"></script>
<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({
//The value "0" means today (0 days from today)
minDate: 0,
onSelect: function(dateStr) {
//datepicker("setDate", new Date()); //día actual.
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate() + 1);
}
$('#check_out').datepicker('setDate', minDate).
datepicker('option', 'minDate', minDate); //día siguiente al actual en "check_out".
}
});
$('#check_out').datepicker().on("input click", function(e) {
console.log("Fecha salida cambiada: ", e.target.value);
});
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mibusqueda" id="mibusqueda" method="POST" class="form_buscar">
<h2>RESERVAR</h2>
<label for="check_in">Entrada:</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">Salida:</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']; }?>">
<p id="calculoNoches"></p><br/>
<div align="center">
<input type="submit" value="Buscar" name="buscar" id="buscar"><br/>
</div>
</form>
</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");
//Comprobacion del numero de noches.
if(noches<=0){
document.getElementById("calculoNoches").innerHTML="";
}else{
document.getElementById("calculoNoches").innerHTML="Estancia de "+noches+" noches.";
}
}
Error:
1) ¿Cómo controlo que inserte antes la fecha de entrada que la fecha de salida? Debido a que si escribe como fecha de salida (el día actual) no debe permitirlo...
2) Al seleccionar una fecha de entrada, automáticamente el campo fecha de salida se autocompleta con el día siguiente al escogido en fecha de entrada (n+1). ¿Por qué no se muestran el cálculo de noches y sólo se muestra el cálculo de noches cuando el usuario elige la fecha de salida, y no automáticamente?