**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... - Para controlar esto, deberías desabilitar el elemento en un primer momento ya sea desde html o js **HTML :** `<input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" value="" disabled="">` **JS (Con jquery):** `$("#check_out").prop( "disabled", true );` - Luego, tendrías que activar el elemento tras la selección de la fecha, algo así: `$("#check_in").on("change", function(){ $("#check_out").prop( "disabled", false ); });` **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? *Esto se debe ha que el la selección de una fecha a través del data-picker no llama,lanza o activa el evento de "**onchange**"* Para solucionar este problema tendrías que llamar al evento "change" del elemento tras la selección de la fecha: $("#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').change(); // activas el evento "onchange" } }); EJEMPLO FUNCIONAL: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("#check_out").on("change", function() { $(this).prop("disabled", false); }); $(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) { var maxDate = $("#check_out").datepicker('getDate'); if (maxDate && minDate < maxDate) {} else { minDate.setDate(minDate.getDate() + 1); $('#check_out').datepicker('setDate', minDate). datepicker('option', 'minDate', minDate); //día siguiente al actual en "check_out". } } $('#check_out').change(); } }); $('#check_out').datepicker().on("input click", function(e) { console.log("Fecha salida cambiada: ", e.target.value); }); }); function calculoNoches() { var check_in = document.getElementById("check_in").value; var check_out = document.getElementById("check_out").value; var f1 = parseDate(check_in); var f2 = parseDate(check_out); var noches = daydiff(f1, f2); //Comprobacion del numero de noches. if (noches <= 0) { document.getElementById("calculoNoches").innerHTML = ""; } else { document.getElementById("calculoNoches").innerHTML = "Estancia de " + noches + " noches."; } } function parseDate(str) { var strDate = str.split('/'); return new Date(strDate[1], strDate[0] - 1, strDate[2]); // AAAA/MMM/DD } function daydiff(first, second) { return Math.round((second - first) / (1000 * 60 * 60 * 24)); // CALCULO EN DIAS } <!-- language: lang-html --> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <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> <title>Reservar</title> </head> <body> <form action="" 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=""> <label for="check_out">Salida:</label> <input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="" disabled> <p id="calculoNoches"></p><br/> <div align="center"> <input type="submit" value="Buscar" name="buscar" id="buscar"><br/> </div> </form> </body> <!-- end snippet -->