在jquery日期选择器中动态禁用日期

在我当前的项目中，当用户选择一家酒店，并选择到达日期和离开日期时，我必须在jquery datepicker中将酒店不可用日期显示为禁用

这是我的javascript代码

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

在这里，我必须根据数据库可用性日期动态禁用minDate和maxDate

这是当组合框值更改时得到的结果

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

这是我的php ajax代码片段，用于获取不可用的日期

<?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);?>

有人能告诉我如何才能做到这一点吗

---

谢谢

您可以使用以下选项更改minDate和maxDate等选项：

---

因此，在AJAX成功处理程序中，只需从数据[0].unavailable\u date\u from和数据[0].unavailable\u date\u to中提取新日期，并将其发送到相应的日期选取器，如上所述。

如果要禁用特定日期，可以使用日期选取器的onSelect选项来执行此操作

例如：

$('#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我对你返回的数据做了一些假设，但我想你可以看到我得到了什么。还要确保您的日期格式与php中的日期选择器相匹配。否则，您将需要在javascript中转换为日期数据类型。

我尝试过，但当我像这样更改代码时，日期选择器不起作用：感谢您的回答，我删除了“选项”并尝试过，它工作正常，但有一件事我想做，我想禁用结果日期，启用其余日期，有没有办法做到这一点， thanks@Mujahid：如果没有“选项”，您将创建一个全新的日期选择器，而不仅仅是更新现有日期选择器上的选项。是否已将日期选择器绑定到$'textfield1'。日期选择器'option'。。。？

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

}