在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

在我当前的项目中，当用户选择酒店时，当他选择到达日期和出发日期时，我必须在jquery datepicker中显示酒店不可用日期为已禁用

This is my javascript code

这是我的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;
    });

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

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

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 snippet to get un-available dates

这是我的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);?>

Can anybody tell me how can I achieve this

任何人都可以告诉我如何实现这一目标

Thanks

谢谢

2 个解决方案

#1

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

您可以使用option方法更改选项（例如minDate和maxDate）：

$('#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.

因此，在您的AJAX成功处理程序中，只需从数据[0] .unavailable_date_from和data [0] .unavailable_date_to中提取新日期，然后将它们发送到适当的日期选择器，如上所述。

#2

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

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

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.

PS我已经对你的返回数据做了假设，但是你认为你可以看到我在那里得到的东西。还要确保您的日期格式从php到日期选择器匹配。否则，您需要在javascript中转换为Date数据类型。

#1