如何从另一个函数启动 DatePicker 的 beforeShowDay

Question

我有一个带有以下代码的日期选择器。我有一个下拉框，当下拉框发生变化时，我想在 ShowDay 之前启动 datePicker 函数。我该怎么做？

var freeDate;

我的部分代码如下：

$("#myDiv").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "yy/mm/dd",
    onSelect: function(dateText, inst) {},
    onChangeMonthYear: function(year, month, inst) {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: '@Url.Action("ListDates", "Party")',
            data: {
                date: new Date(year, month - 1, 1).toString("yyyy/MM/dd"),
                userID: userID
            },
            success: function(data) {
                freeDate = eval(data);
            },
            error: function(request, status, error) {}
        });
    },
    beforeShowDay: function(dateToShow) {
        var returnResult = new Array();
        returnResult.push(true);
        var itemMatched = false;
        $.each(freeDate, function(key, value) {
            if (new Date(parseInt(value.substr(6))).compareTo(dateToShow) == 0) {
                itemMatched = true;
                returnResult.push('timeNotFree');
                return;
            }
        });
        if (!itemMatched) returnResult.push('');
        returnResult.push('');
        return returnResult;
    }
});​

---

$('#myList').change(function() {
    userID = $("#userList > option:selected").attr("value");
    // myList is used to have freeDate and the DatePicker must be shown accordingly.
    $.ajax({
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: '@Url.Action("ListDates", "Party")',
        data: {
            date: new Date($("#myDiv").datepicker("getDate").toString("yyyy/MM/dd")),
            userID: userID
        },
        success: function(data) {
            freeDate = eval(data);
        },
        error: function(request, status, error) {}
    });
    $("#myDiv").datepicker("setDate", $("#myDiv").datepicker("getDate").toString("yyyy/MM/dd"));
});​

Answer 1

beforeShowDay 是 datepicker 在呈现 day 之前触发的事件。您可以使用它来自定义包含日期的单元格的显示方式，例如你可以把它变成红色来表示被阻止的日期。

根据我对您的问题的理解，您可以调用datapicker.refresh() 方法来指示freeDate 变量已更改（例如通过AJAX 响应）并且需要再次呈现日历。

编辑

我相信这是您的下拉菜单的代码，好像它使用了 ajax：

$('#myList').change(
...

在成功回调中，你有：

freeDate = eval(data);

这是freeDate 更改的地方，这可能是您应该调用.refresh() 方法的地方。注意 AJAX 默认是异步的，所以在选择值和成功事件回调之间会有一些延迟。

下面是在现有日期选择器上调用方法的方法：

.
.
.
freeDate = eval(data);
$("#myDiv").datepicker("refresh");
.
.
.

Answer 2

我会说您可能应该在 datepicker 调用之外定义该函数，然后您的更改和 datepicker 可以调用该函数。

编辑：添加了说明。

试图弄清楚插件如何调用函数可能比它的价值更多。您可以单独定义函数，然后将其传递给插件。然后您的下拉更改事件可以调用该独立方法。

类似这样的：

function doMyThing(dateToShow){
   // do stuff
}

$("#myDiv").datepicker({
    ...
    beforeShowDay: function(dateToShow){
        doMyThing(dateToShow);
    }
});  

$('#myList').change(function () {
    doMyThing(dateToShow);
});  

我唯一不确定的是您希望在 onchange 中作为参数传递什么。由于它不是点击日期的动作，所以我不知道“dateToShow”应该是什么。