禁用特定日期并在今天之前禁用日期

时间:2016-12-28 19:40:31

标签: jquery css

我有一个带有禁用日期的日期选择器,它显示为红色,当我禁用今天之前的日子时,它们也会变红,问题是我只想红色预订(预订)的日子,并且放置今天前几天禁用但没有颜色。

守则

<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["buttonValue"];
    $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>
        var disabledDates = <?php echo json_encode($dates_ar)?>;
            $(function() {
               var date = new Date();
                $("#datepicker9").datepicker("destroy");
                 $( "#datepicker9").datepicker({
            minDate:0,
            dateFormat: 'yy-mm-dd',
                     beforeShowDay: disableSpecificDates

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

  }

        </script>
        <?php
    }

    else {
?>
        <script>
            $(function() {
                $( "#datepicker9").datepicker({ 
                    dateFormat: 'yy-mm-dd',
           });
            });
        </script>
        <?php

    }
?>

CSS:

<style>
 .ui-datepicker-today a.ui-state-highlight {
        border-color: #000000;
        background: #607D8B ;
        color: rgb(255, 255, 255);    
    }
   .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
        border-color: #000000;
        background: #607D8B;
        color: rgb(255, 255, 255);
    }
.ui-datepicker td.ui-state-disabled>span{background: #FF6C6C;}
.ui-datepicker td.ui-state-disabled{opacity:50;}

</style>

结果:enter image description here

谢谢你的时间

0 个答案:

没有答案