KendoUI DateTimePicker undefined on document.ready

Question

I have a Kendo DateTimePicker control in an mvc (asp.net) partial view that I am trying to access from document.ready():

@(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")
                                )                               
)

The javascript:

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

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

When the debugger line runs dtp is undefined. How can I initialize this date time picker when the partial view loads?

Answer 1

What I ended up doing is initializing the datetimepicker from pure javascript and ditched the razor version:

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

Answer 2

Your original approach should work if you put the ready block at the bottom of the page, or at least below the widget initialization code (also see this section of the docs).

If you put it above the @(Html.Kendo() section, TestDTP will run before the widget is initialized, since the widget initialization code is also wrapped in a jQuery ready block (and the various ready blocks are executed sequentially).

Answer 3

I usually use this to get the instance:

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