Disponibilidad datepicker (mysql,php)

publicado por: Anonymous

Hola estoy haciendo un sistema de reservas en el cual necesito mostrar en mi datepicker las fechas que están ocupadas y las que no.

la tabla reservas es asi (esta resumida)

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;

en mi formulario tengo los input de llegada y salida

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

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

y para el datepicker
tengo este codigo

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

esto me muestra el calendario con los días en rojo, pero los días que yo definí ya en la función :

 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' );

introducir la descripción de la imagen aquí

entonces lo que busco es que desde mi tabla reservas pueda obtener un rango de fechas entre llegada y salida (anteriormente ya seleccionada la id_habitacion), y ese rango aparezca en rojo y no se pueda seleccionar en el datepicker .
eh buscado y bastante, pero no eh podido juntar o coordinar la información con mi código. :/

solución

Encontre como deshabilitar los dias en esta pagina
https://stackoverflow.com/questions/30331543/disabling-specific-dates-from-html-datepicker-jquery

solo cambie los dias para un ejemplo mas reciente espero te ayude

_x000D_

_x000D_

/** Days to be disabled as an array */_x000D_
var disableddates = ["12-12-2016", "13-12-2016", "14-12-2016", "14-12-2016"];_x000D_
_x000D_
_x000D_
function DisableSpecificDates(date) {_x000D_
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);_x000D_
    return [disableddates.indexOf(string) == -1];_x000D_
  }_x000D_
_x000D_
_x000D_
$(function() {_x000D_
  $("#date").datepicker({_x000D_
    beforeShowDay: DisableSpecificDates_x000D_
  });_x000D_
});

_x000D_

<!doctype html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <meta charset="UTF-8">_x000D_
  <title>Untitled Document</title>_x000D_
_x000D_
  <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
  <input id="date" type="text">_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *