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?

score 4 · Answer 1 · answered Mar 29 '14 at 01:55

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).

score 0 · Answer 2 · answered Mar 28 '14 at 20:50

0

I usually use this to get the instance:

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

answered Mar 28 '14 at 20:50

Matt Millican

4,044
4
38
55

I *believe* the way I am getting it and the way you are is basically the same. My code works as is outside of the document.ready but no from within. – Mike Cheel Mar 28 '14 at 20:59

score 0 · Accepted Answer · answered Mar 28 '14 at 21:00

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

KendoUI DateTimePicker undefined on document.ready

3 Answers3

Linked