Availability datepicker (mysql, php)

Question

Availability datepicker (mysql, php)

Navigation

#1 by (0 votes)

0

Hello, I am making a reservation system in which I need to show on my datepicker the dates that are occupied and those that are not.

the reservation table is like this (this summary)

CREATE TABLE if not exists reservas(

id_reserva integer(20) NOT NULL AUTO_INCREMENT,
id_cliente integer,
id_residencial integer(20),
id_habitacion integer(20),
llegada date,
salida date,
PRIMARY KEY (id_reserva), 
FOREIGN KEY (id_cliente) REFERENCES clientes(id_cliente),
FOREIGN KEY (id_residencial) REFERENCES residenciales(id_residencial),
FOREIGN KEY (id_habitacion) REFERENCES habitaciones(id_habitacion)
) ENGINE=InnoDB;

in my form I have the arrival and departure input

<input style="height: 31px;" id="datepicker2" class="form-control" name="llegada" >

...

<input style="height: 31px;" id="datepicker3" class="form-control" name="salida">

and for the datepicker I have this code

<script>
$(function() {
var eventDates = {};
        eventDates[ new Date( '12/04/2016' )] = new Date( '12/05/2016' );
        eventDates[ new Date( '12/06/2016' )] = new Date( '12/06/2016' );
        eventDates[ new Date( '12/20/2016' )] = new Date( '12/20/2016' );
        eventDates[ new Date( '12/25/2016' )] = new Date( '12/25/2016' );

        $( "#datepicker3" ).datepicker({
        numberOfMonths:[2,2],
        showButtonPanel: true,
            firstDay: 1,
      beforeShowDay: function( date ) {
                var highlight = eventDates[date];
                if( highlight ) {
                     return [true, "event", "highlight"];
                } else {
                     return [true, '', ''];
                }
             }
        });

    });
</script>

<style type="text/css">    
.event a {
    background-color: rgba(244, 67, 54, 0.45) !important;
    background-image :none !important;
    color: #ffffff !important;
}
</style>

This shows me the calendar with the days in red, but the days that I defined already in the function:

 eventDates[ new Date( '12/04/2016' )] = new Date( '12/05/2016' );
            eventDates[ new Date( '12/06/2016' )] = new Date( '12/06/2016' );
            eventDates[ new Date( '12/20/2016' )] = new Date( '12/20/2016' );
            eventDates[ new Date( '12/25/2016' )] = new Date( '12/25/2016' );

So what I'm looking for is that from my table reservas can get a range of dates between llegada and salida (previously already selected the id_habitacion ), and that range appears in red and can not be selected on the datepicker. I searched and quite, but I could not gather or coordinate the information with my code. : /

mysql php datepicker

asked by Diana Letelier 04.12.2016 в 00:19

source

1 answer

Terminated Program Files [closed] Errors when installing SQL Server 2012 (sqlwriter.msi) which then tells me that the user does not exist

score 0 · Accepted Answer

I found how to disable the days on this page link

just change the days for a more recent example I hope I help you

/** Days to be disabled as an array */
var disableddates = ["12-12-2016", "13-12-2016", "14-12-2016", "14-12-2016"];


function DisableSpecificDates(date) {
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [disableddates.indexOf(string) == -1];
  }


$(function() {
  $("#date").datepicker({
    beforeShowDay: DisableSpecificDates
  });
});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>

<body>

  <input id="date" type="text">


</body>

</html>