Disable dates dynamically in jquery datepicker

In my current project, when the user select a hotel, and when he select the arrival date, and departure date, I have to show the hotel unavailable dates as disabled in jquery datepicker

This is my javascript code

    $("#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;
    });    

Here I have to disable the minDate and maxDate dynamically according to the database availability dates.

This is the result I get when the combobox value changes

[{"unavailable_date_from":"2011-03-03","unavailable_date_to":"2011-03-31"}]

This is my php ajax snipp开发者_StackOverflow中文版et to get un-available 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);?>

Can anybody tell me how can I achieve this

Thanks

You can change the options (such as minDate and maxDate) using the option method:

$('#textfield1').datepicker('option', {
    minDate: newMinDate,
    maxDate: newMaxDate
});

So, in your AJAX success handler, just pull the new dates out of data[0].unavailable_date_from and data[0].unavailable_date_to and send them to the appropriate datepickers as above.

If you want to disable specific days, you can do it with the onSelect option for the datepicker.

for example:

$('#textfield1').datepicker({
   dateFormat: 'yy-mm-dd',                                             
   minDate: data[0].unavailable_date_from,
   maxDate: data[0].unavailable_date_to
   onSelect: function(dateText, inst) { 
       if ($.inArray(dateText, data[0].unavailable_dates))
       {
           alert('invalid date');
           // do whatever you like here
       }
   });  

}

PS I have made assumptions about your returned data, but think you can see what I'm getting at there. Also make sure that your date formats match from php to the date picker. Otherwise you'll need to convert to Date datatypes in javascript.