1

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?

0

1 respuesta 1

3

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:

$("#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
}
<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>

8
  • Muchas gracias. Una vez probado la parte del "onchange" me sigue "fallando" debido a que si selecciono una fecha de entrada, sí me sale la fecha de salida (día siguiente) pero no me hace el calculoNoches(). Con tu código no me hace el calculo de las noches.
    – omaza1990
    Commented el 18 dic. 2017 a las 11:13
  • Vale, posiblemente porque tengas el onchange en el check_out y estemos lanzado el evento para el check_in, voy a editarlo en el código y añadirte más.
    – Edu3D
    Commented el 18 dic. 2017 a las 11:17
  • Sí, tengo el onchange en check_out, así cada vez que cambia calcula las noches...
    – omaza1990
    Commented el 18 dic. 2017 a las 11:19
  • 1
    Prueba con el cambio que he puesto: $('#check_out').change(); y no $(this).change();
    – Edu3D
    Commented el 18 dic. 2017 a las 11:29
  • 1) Solucionado. 2) ¿Por qué cuando selecciono una fecha de entrada, me sigue deshabilitado el campo fecha de salida?
    – omaza1990
    Commented el 18 dic. 2017 a las 11:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.