0

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. :/

1 respuesta 1

0

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

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

2
  • sii gracias si ayudó, ahora solo falta rescatar un rango de fechas, desde 2 fechas de la BD (llegada,salida), estoy en eso.. y haber si alguien también lo postea acá. :) el 4 dic. 2016 a las 0:34
  • de nada diana, te recomiendo revisar la documentacion oficial jqueryui.com/datepicker , tambien podrias ayudar dandole como respuesta aceptada oh votar a fover la respuesta te lo agradeceria el 4 dic. 2016 a las 0:47

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.