KendoUI DateTimePicker 在 document.ready 上未定义答案

【问题标题】：KendoUI DateTimePicker undefined on document.readyKendoUI DateTimePicker 在 document.ready 上未定义
【发布时间】：2014-03-28 20:22:50
【问题描述】：

我在尝试从 document.ready() 访问的 mvc (asp.net) 部分视图中有一个 Kendo DateTimePicker 控件：

@(Html.Kendo().DateTimePickerFor(vvm => vvm.StartTime)
                    .Name("dtpVisitStart")
                    .Format("yyyy/MM/dd HH:mm tt")
                    .TimeFormat("HH:mm:tt")
                    .Events(e => e.Change("dtpVisitStart_Change")
                                )                               
)

javascript：

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

function TestDTP() {
    var dtp = $("#dtpVisitStart").getKendoDateTimePicker();
    debugger;
}

当调试器行运行时，dtp 是未定义的。加载部分视图时如何初始化此日期时间选择器？

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc kendo-datetimepicker

【解决方案1】：

如果您将就绪块放在页面底部，或至少在小部件初始化代码下方 (also see this section of the docs)，您的原始方法应该可以工作。

如果你把它放在@(Html.Kendo() 部分之上，TestDTP 将在小部件初始化之前运行，因为小部件初始化代码也包装在一个 jQuery 就绪块中（并且各种就绪块是按顺序执行的）。

【讨论】：

【解决方案2】：

我通常用这个来获取实例：

var dtp = $('#dtpVisitStart').data('kendoDateTimePicker');

【讨论】：

我相信我得到它的方式和你的方式基本相同。我的代码在 document.ready 之外可以正常工作，但不能在内部工作。

【解决方案3】：

我最终做的是从纯 javascript 初始化 datetimepicker 并放弃了 razor 版本：

function TestDTP() {
    $("#dtpVisitStart").kendoDateTimePicker({
        format: "MM/dd/yyyy HH:mm tt",
        timeFormat: "HH:mm", 
        change: dtpVisitStart_Change, 
        value: "@(startTime)"
    });
    var dtp = $("#dtpVisitStart").getKendoDateTimePicker();
    debugger;
}

【讨论】：