For my current project, I need to implement a feature where the user can select a hotel, arrival date, and departure date. Upon selecting the hotel, I have to display the unavailable dates of the hotel in the jQuery datepicker as disabled.
This is the JavaScript code I am using:
$("#select_villa").change(function(){
$('#textfield1').datepicker( "destroy" );
var dataString = 'villa=' + $("#select_villa").val();
$.ajax({
type: "GET",
url: "include/getdate.php",
data: dataString,
dataType: "json",
success: function(data){
$('#textfield1').datepicker({
dateFormat: 'yy-mm-dd',
minDate: data[0].unavailable_date_from,
maxDate: data[0].unavailable_date_to
});
}
});
return false;
});
I have to dynamically disable the minDate and maxDate based on the availability dates stored in the database.
When the combobox value changes, this is the result I receive:
[{"unavailable_date_from":"2011-03-03","unavailable_date_to":"2011-03-31"}]
Here's the PHP Ajax snippet I use to fetch the unavailable dates:
<?php
include("db.php");
$returnArray = array();
$villa = $_GET['villa'];
$sql = mysql_query("SELECT unavailable_date_from, unavailable_date_to FROM villa WHERE name = '".$villa."'");
while($row = mysql_fetch_object($sql)){
$returnArray[] = $row;
}
echo json_encode($returnArray);?>
If anyone has suggestions on how I can achieve this functionality, please let me know.
Thank you!