基于jQuery AJAX+MVC实现选地点后禁用日期选择器指定日期

我来帮你搞定这个问题！你遇到的核心问题是在获取到禁用日期后，没有正确配置beforeShowDay函数来标记这些日期不可选，另外代码里还有几个小错误需要修正。下面是完整的解决方案：

1. 先修正MVC控制器的Action #

确保控制器返回格式统一的日期字符串数组（比如yyyy-MM-dd格式），这样前端可以准确对比日期：

public ActionResult getAvailableDates(string id)
{
    // 这里根据传入的id从数据库/业务逻辑获取需要禁用的日期
    var disabledDatesList = new List<string>
    {
        "2024-05-15",
        "2024-05-20",
        "2024-05-25"
        // 更多禁用日期...
    };
    
    // 返回JSON格式的日期数组
    return Json(disabledDatesList, JsonRequestBehavior.AllowGet);
}

2. 修复前端JavaScript代码 #

主要修正AJAX回调的参数错误、添加日期检查逻辑，并处理日期选择器的初始化/更新问题：

// 全局变量存储禁用日期，方便日期检查函数访问
var disabledDates = [];

var Locations = [ 
    { value: 'Andorra', id: 'AD' }, 
    // ... 其他地点数据 ...
    { value: 'Zimbabwe', id: 'ZZ' } 
];

$('#autocomplete').autocomplete({
    lookup: Locations,
    onSelect: function (suggestion) {
        console.log('你选择了: ' + suggestion.value + ', ID: ' + suggestion.id);
        
        $.ajax({
            url: '@Url.Action("getAvailableDates","booking")',
            dataType: "json",
            type: "GET",
            cache: false,
            data: { id: suggestion.id },
            success: function (holidays) {
                // 把返回的日期字符串转为Date对象，方便后续格式统一对比
                disabledDates = holidays.map(dateStr => new Date(dateStr));
                
                // 判断日期选择器是否已初始化，避免重复创建
                if ($('#txtAvailableDates').datepicker("instance")) {
                    // 已初始化则更新beforeShowDay配置
                    $('#txtAvailableDates').datepicker("option", "beforeShowDay", checkIfDisabled);
                } else {
                    // 未初始化则直接创建并配置
                    $('#txtAvailableDates').datepicker({
                        beforeShowDay: checkIfDisabled,
                        dateFormat: 'yy-mm-dd' // 和控制器返回的日期格式保持一致
                    });
                }
            },
            error: function (xhr) {
                alert('获取禁用日期失败: ' + xhr.responseText);
            }
        });
    }
});

// 核心：检查当前日期是否需要禁用的函数
function checkIfDisabled(date) {
    // 把当前日期转为和控制器一致的yyyy-MM-dd格式
    var currentDateStr = $.datepicker.formatDate('yy-mm-dd', date);
    
    // 检查当前日期是否在禁用列表中
    var isDisabled = disabledDates.some(disabledDate => {
        return $.datepicker.formatDate('yy-mm-dd', disabledDate) === currentDateStr;
    });
    
    // 返回格式：[是否可选, 禁用时的样式类, 禁用时的提示文本]
    return [!isDisabled, isDisabled ? 'ui-state-disabled' : '', isDisabled ? '该日期不可预订' : ''];
}

• 日期格式统一：控制器返回的日期字符串格式必须和前端$.datepicker.formatDate使用的格式一致，否则会出现对比错误。
• 避免重复初始化：如果用户多次选择地点，不要重复创建日期选择器，而是用option方法更新配置。
• 样式提示：通过ui-state-disabled类可以让禁用的日期显示灰色不可点击状态，提升用户体验。

内容的提问来源于stack exchange，提问作者ksam