Este es mi primer post asi que discúlpenme por cualquier error
Soy nuevo en JQUERY y AJAX, así que por favor deja bien claras tus respuestas.
He buscado mucho pero fue en vano, estoy construyendo un sistema de reserva de apartamentos en PHP MYSQLI y JQUERY, tengo 2 jquery datepickers en la misma página, uno excepto la fecha de entrada y el otro excepto la fecha de salida, el MYSQL La tabla utilizada se llama reservas y tiene estas columnas:
id, nombre, correo electrónico, check_in_date, check_out_date
Digamos que la tabla Mysql devuelve 2 filas con la primera check_in_date (2017-05-02) y check_out_date (2017-05-10)
y el segundo check_in_date (2017-06-05) y check_out_date (2017-06-20)
¿Cómo puedo deshabilitar todas las fechas dentro de estos 2 rangos en ambos selectores de fecha? Esto es lo que se me ocurrió
Esto es parte del formulario HTML.
<div class="form-group"> <label for="check_in_date">Check In Date</label> <input type="text" class="form-control" id="datepicker" placeholder="Check in Date"> </div> <div class="form-group"> <label for="check_out_date">Check Out Date</label> <input type="text" class="form-control" id="datepicker1" placeholder="Check Out Date"> </div>Este es el Javascript - Está incompleto
$(function() { function checkAvailability(){ } $( "#datepicker" ).datepicker({ dateFormat : 'yy-mm-dd', beforeShowDay: checkAvailability } }); $( "#datepicker1" ).datepicker({ dateFormat : 'yy-mm-dd', beforeShowDay: checkAvailability } }); });El archivo PHP Availability.php es el siguiente
$result = mysqli_query("SELECT check_in_date, check_out_date FROM bookings"); while ($row = mysqli_fetch_assoc($result)){ $check_in_dates[] = $row['check_in_date']; $check_out_dates[] = $row['check_out_date']; }Gracias de antemano
Lo descubrí aquí está la solución.
<?php //below function returns all the dates within a given range function date_range($first, $last, $step = '+1 day', $output_format = 'Ymd' ) {//if it was simple y example ymd then it will show 17 instead of 2017 $dates = array(); $current = strtotime($first); $last = strtotime($last); while( $current <= $last ) { $dates[] = date($output_format, $current); $current = strtotime($step, $current); }//end of while loop return $dates;//returns a array }//end of function //select all the date ranges that exist in the database $query = 'SELECT check_in, check_out FROM bookings'; $result = mysqli_query($db, $query); $i = 0; while ($row=mysqli_fetch_assoc($result)){ //output all the dates within the ranges in the database $range[$i] = date_range($row['check_in'], $row['check_out']);//creates a associative array with numerical index values $i++; } $individual_dates = array(); //converts the associative array into a regular array foreach($range as $ranges){ foreach ($ranges as $many_ranges){ $individual_dates[] = $many_ranges; } } $json_array = json_encode($individual_dates); ?>y aqui esta el javascript
<script> var dateToday = new Date(); //creating new date obj. used to disable dates before today used in minDate: dateToday $(function() { $( "#datepicker" ).datepicker({ minDate: dateToday, dateFormat : 'yy-mm-dd', beforeShowDay: checkAvailability }); $( "#datepicker1" ).datepicker({ minDate: dateToday, dateFormat : 'yy-mm-dd', beforeShowDay: checkAvailability }); }) /******************THE json array returned by php is used here*****/ var $disabledDates = <?php echo $json_array; ?> function checkAvailability(mydate){ var $return=true; var $returnclass ="available"; $checkdate = $.datepicker.formatDate('yy-mm-dd', mydate); for(var i = 0; i < $disabledDates.length; i++) { if($disabledDates[i] == $checkdate) { $return = false; $returnclass= "unavailable"; } } return [$return,$returnclass]; } </script>