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         


        

Answer 1

I usually use this to get the instance:

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

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

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;
}