在 $(document).ready 上操作 datePicker CSS答案

【问题标题】：Manipulating datePicker CSS on $(document).ready在 $(document).ready 上操作 datePicker CSS
【发布时间】：2013-08-07 13:01:15
【问题描述】：

我正在尝试根据其他小部件（复选框和数字文本框）启用/禁用日期选择器。当我尝试使用 true 或 false 作为参数调用 DatePicker.enable() 时，我收到一个错误，因为 DatePicker 尚未准备好。似乎 Kendo 小部件在 $(document).ready 之前还没有准备好。当日期选择器准备好被操纵时，是否有任何事件或事情会告诉我？现在我使用的 setTimeout 感觉很不对。

这是我的代码示例。

$(document).ready(function () {
    ChangeDatePickersState();
});

function ChangeDatePickersState() {
    var input = $('#MyCheckbox:checked')
    var bool = input.length != 0 ? true : false;
    EnableDatePickerForCheckbox('MyDatePicker', bool);

function EnableDatePickerForCheckbox(inputName, inputValue) {
    var datePicker = $('#' + inputName).data("kendoDatePicker");
    if (inputValue == true) {
        datePicker.enable(true);
    }
    else {
        datePicker.enable(false);
        datePicker.value(null);
    }
}

提前致谢。

【问题讨论】：

我忘了提到我在 MVC 中使用 Kendo，但无论如何我从他们的论坛中得到了一个答案：Kendo UI 小部件在初始化时不会触发事件，但如果你将您的自定义逻辑包含在 document.ready 处理程序中，该处理程序添加在页面的末尾。这将确保处理程序将在所有小部件初始化语句之后执行，这些语句也依赖于 document.ready。在这种情况下不需要 setTimeout。谢谢大家！

标签： javascript jquery events datepicker kendo-ui

【解决方案1】：

我忘了提到我在 MVC 中使用 Kendo，但无论如何我从他们的论坛上得到了答案：

Kendo UI 小部件在初始化时不会触发事件，但如果您将自定义逻辑包含在 document.ready 处理程序（添加在页面末尾）中，您就可以依赖它们的存在。这将确保处理程序将在所有小部件初始化语句之后执行，这些语句也依赖于 document.ready。在这种情况下不需要 setTimeout。

一些小部件，如 Grid 或 ListView 可以初始化，但仍不能填充到 document.ready 中。根据具体场景，可以使用对应widget的dataBound事件来执行自定义逻辑。

谢谢大家！

【讨论】：

【解决方案2】：

DatePicker 应该可以在您调用后立即进行修改

$("#MyDatePicker").kendoDatePicker();

我对您在此处发布的 JS 代码进行了以下更改，并且成功了

$(document).ready(function () {
    $("#MyDatePicker").kendoDatePicker();
    ChangeDatePickersState();
});

有关更多信息，请参阅这些链接 http://demos.kendoui.com/web/datepicker/api.html Disabling kendo datepicker when clicked on checkbox

【讨论】：

忘了提到我正在使用 MVC 并且我的脚本在创建日期选择器的 html 助手之前，这是问题所在。