This is my first post so excuse me for any mistakes
I am new to JQUERY and AJAX so please make your answers very clear
I have done a lot of searching but to no avail, I am building a apartment booking system in PHP MYSQLI and JQUERY, I have 2 jquery datepickers on the same page one excepting the check in date and the other excepting the checkout date, the MYSQL table used is called bookings and it has these columns -
id, first_name, email, check_in_date, check_out_date
Lets say that the Mysql table returns 2 rows with the first returning check_in_date(2017-05-02) and check_out_date(2017-05-10)
and the 2nd returning check_in_date(2017-06-05) and check_out_date(2017-06-20)
How can I disable all the dates within these 2 ranges on both datepickers This is what I have come up with
This is part of the HTML form
<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>
This is the Javascript - It's Incomplete
$(function() {
function checkAvailability(){
}
$( "#datepicker" ).datepicker({
dateFormat : 'yy-mm-dd',
beforeShowDay: checkAvailability
}
});
$( "#datepicker1" ).datepicker({
dateFormat : 'yy-mm-dd',
beforeShowDay: checkAvailability
}
});
});
The PHP file availability.php is as follows
$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'];
}
Thanks in Advance
I Figured it out here is the solution
<?php
//below function returns all the dates within a given range
function date_range($first, $last, $step = '+1 day', $output_format = 'Y-m-d' ) {//if it was simple y example y-m-d 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);
?>
and here is the 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>