Skip to main content
Se ha añadido un ejemplo funcional para una demostración más simple
Origen Enlace
Edu3D
  • 967
  • 4
  • 10

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>

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>

se añadieron 6 caracteres en el cuerpo
Origen Enlace
Edu3D
  • 967
  • 4
  • 10

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".

        $(this'#check_out').change(); // activas el evento "onchange"
    }
});

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".

        $(this).change(); // activas el evento "onchange"
    }
});

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"
    }
});
Origen Enlace
Edu3D
  • 967
  • 4
  • 10

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".

        $(this).change(); // activas el evento "onchange"
    }
});