Datepicker Dates - Do not open Calendar

Question

Datepicker Dates - Do not open Calendar

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

I am making an online booking website, and I would like to put on a div the number of nights that the guest will stay at my hotel.

My question is this: If I select an entry date (check_in), which automatically checks out on check out date, I block ALL previous dates because it must be a higher date . Why do not I get the Datepicker?

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Reservar</title>
        <link rel="stylesheet" href="css/estilos_reservar.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">
            $("#check_in").datepicker({
            onSelect: function(dateStr) {
                var minDate = $(this).datepicker('getDate');
                if (minDate) { 
                    m.setDate(minDate.getDate() + 1);
                } 
                $('#check_out').datepicker('setDate', minDate).
                datepicker('option', 'minDate', minDate);
            }
            });

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

            <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" onchange="calculoNoches();" id="check_out" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>">
        </form> 
    </body>
</html>

It does not show me any error by pressing F12 on console.

javascript jquery php

asked by omaza1990 14.11.2017 в 22:15

source

2 answers

How to limit the values of a property of an object in JS? Consult concatenated column

score 2 · Answer 1

Arrange it as it suits you. See if this function works for you:

function compararFecha($fecha){
date_default_timezone_set('UTC');
$datetime1 = new DateTime("now");//fecha actual 
$datetime2 = new DateTime($fecha); 
$interval = $datetime1->diff($datetime2);
$dias= $interval->format('%R%a');
return $dias;
}

To do the one-time show the div, I suppose you should use an onchange. Greetings.

score 2 · Answer 2

As stated in comments, if you are not going to consult anything on the server, you can select the dates in each input and do the calculations directly. Then on the div you print the result of the calculation, as you can try in the code snippet below.

Calls to the server must be made to perform operations that must necessarily go through the server. Keep in mind that each call to the server has a cost of performance and consumption of network resources in the client and the server.

Here I used a jQuery UI tool called DatePicker , which, when you click on your two inputs, opens a beautiful calendar to choose your date. The improvement is not only at the level of user experience, but also accuracy, since from the selected date you can build a date object with which you will calculate the difference in days and can do any other operation that requires accuracy. It would not be the same as having to write the date by hand, taking into account that in that way the margin of error would be much greater.

$(function() {

  $("#btnReservar").on("click", function(e) {
    e.preventDefault();
    var fechaEntrada = $('#txtEntrada').datepicker("getDate");
    var fechaSalida = $('#txtSalida').datepicker("getDate");

    var totalDias = Math.abs(Math.ceil((fechaEntrada - fechaSalida) / (1000 * 60 * 60 * 24)));

    var strMensaje = "*** Total de días entre " +
      fechaEntrada.toLocaleDateString() + " y " + fechaSalida.toLocaleDateString() + ": " + totalDias;
    console.log(strMensaje);

    $('.calcular_dias').html(strMensaje);

  });


  /*Establecemos el minDate del segundo DP*/

  $("#txtEntrada").datepicker({

    onSelect: function(dateStr) {
      var minDate = $(this).datepicker('getDate');
      if (minDate) { 
        minDate.setDate(minDate.getDate() + 1);
      } 
        $('#txtSalida').datepicker('setDate', minDate).
        datepicker('option', 'minDate', minDate);
    }
  });

/*Listener del 2do DP  por si lo necesitas para algo*/
  $('#txtSalida').datepicker()
    .on("input click", function(e) {
      console.log("Fecha salida cambiada: ", e.target.value);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mireserva" id="mireserva" method="POST" class="form">
  <h2>RESERVAR</h2>
  <label for="check_in">Entrada:</label>
  <input type="text" id="txtEntrada" placeholder="Fecha de entrada" readonly="readonly">
  <label for="check_out">Salida:</label>
  <input type="text" id="txtSalida" placeholder="Fecha de salida">

  <div class="calcular_dias">

  </div>
  <div align="center">
    <button id="btnReservar">Reservar</button><br/>
  </div>
</form>