javascript - propiedades - datepicker html

Desactiva todas las fechas en datepicker donde id=$ id

Question

Hola, tengo primero este formulario: agregareserva.php:

    <form action="GUImostrarcalendario.php" method="post" name="a">
    <select  type="text" id="id_habitacion"  name="id_habitacion" />
    <option value"1">ID 1</option>
    <option value="2">ID 2</option></select>
    <input type="submit" name="a"  value="Ver"/>
    </form>

En GUImostrarcalendario.php tengo:

<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["id_habitacion"];
    $sql1="SELECT llegada,salida,id_reserva FROM reservas 
    where id_habitacion =''$id_habitacion''";
    $query = $con->query($sql1);
    ?>
    <?php if($query->num_rows>0):?>
    <?php while ($r=$query->fetch_array()):?>
    <?php

    $begin = new DateTime( $r["llegada"] );
    $end = new DateTime( $r["salida"] );
    $end = $end->modify( ''+1 day'' ); 
    $interval = new DateInterval(''P1D'');
    $daterange = new DatePeriod($begin, $interval ,$end);
    $dates_ar = [];
    foreach ($daterange as $date) {
        $dates_ar[] = $date->format("Y-m-d");
    }
    $disabled_dates = ''"'' . implode(''", "'', $dates_ar) .''"'';
    ?>
    <script>
    $(function() {
    var disabledDays = [<?php echo $disabled_dates; ?>];
    var date = new Date();
    jQuery(document).ready(function() { 
        $( "#datepicker9").datepicker({ 
            dateFormat: ''Y-m-d'',
            beforeShowDay: function(date) {
                var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                for (i = 0; i < disabledDays.length; i++) {
                    if($.inArray(y + ''-'' + (m+1) + ''-'' + d,disabledDays) != -1) {
                        //return [false];
                        return [true, ''ui-state-active'', ''''];
                    }
                }
                return [true];

            }
        });
    });
    });

    </script>

    <?php endwhile;?>
    <?php else:?>
    <?php endif;?>
    <input type="text" id="datepicker9" name ="datepicker9"/>

Este código es para mostrar en el datepicker todas las fechas en la reserva (reservas), cuando id_habitacion (id room) es seleccionar en la entrada de seleccionar.

Este código funciona pero solo muestra en el selector de fecha el primer registro en la base de datos, por ejemplo, la tabla donde id_habitacion = 1 es:

todas las fechas en la reserva para esta identificación

Y mi código da como resultado datepicker:

Mostrar solo una fecha de reserva

Finalmente necesito el datepicker mostrar todas las fechas como en la tabla que muestro.

Gracias.

Answer 1

Su código actualmente crea múltiples instancias de

`$( "#datepicker9").datepicker({`

Uno para cada rango de fechas. Necesita cambiar su código para hacerlo solo una vez, entonces, fuera del ciclo while

Esto requiere que $ date_ar se defina fuera del ciclo wile también

Además, estás usando fragmentos de código php consecutivos innecesariamente

El código debería verse así

<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["id_habitacion"];
    $sql1="SELECT llegada,salida,id_reserva FROM reservas where id_habitacion =''$id_habitacion''";
    $query = $con->query($sql1);
    $dates_ar = [];
    if($query->num_rows>0) {
        while ($r=$query->fetch_array()) {
            $begin = new DateTime( $r["llegada"] );
            $end = new DateTime( $r["salida"] );
            $end = $end->modify( ''+1 day'' ); 
            $interval = new DateInterval(''P1D'');
            $daterange = new DatePeriod($begin, $interval ,$end);
            foreach ($daterange as $date) {
                $dates_ar[] = $date->format("Y-m-d");
            }
        }
        ?>
        <script>
            $(function() {
                var disabledDays = <?php echo json_encode($date_arr)?>;
                var date = new Date();
                $( "#datepicker9").datepicker({ 
                    dateFormat: ''Y-m-d'',
                    beforeShowDay: function(date) {
                        var m = date.getMonth() + 1, 
                            d = date.getDate(), 
                            y = date.getFullYear(),
                            strdate = [y,m,d].join(''-'');
                        if (disabledDays.indexOf(strdate) == -1) {
                            return [true, ''ui-state-active'', ''''];
                        }
                        return [false];
                    }
                });
            });
        </script>
        <?php
    }
?>
<input type="text" id="datepicker9" name ="datepicker9"/>

Esto incluye el excelente punto de @ charlietfl sobre no usar implosión, pero usando

var disabledDays = <?php echo json_encode($date_arr)?>;

en lugar

Tenga en cuenta que he usado el estilo de codificación "C"

if() {
    while() {
    }
}

en lugar del estilo alternativo que usaste

if():
    while():
    endwhile;
else:
endif;

Además, ningún else bloque ya que no hay nada que hacer de todos modos