TimePicker error in IE8

[Sandra]

Hi there,

I'm getting the following error from IE8 when trying to define two Timepickers within a Grid's edit popup window:-

"Object doesn't support this property or method"

The result of this is my change event isn't executing and I can no longer submit the update. The bottom button stops working.

The code I'm using currently looks like this :-

function editTimeSheet(e) {

    e.container.find('#projectDrpDwn').kendoDropDownList({

        autoBind: false,

        dataSource: dsn.projects

    });

 

    e.container.find('#WorkDate').kendoDatePicker();

      // *** ERRROR OCCURS AFTER THIS LINE IN IE8 ONLY***

    startTime = e.container.find('#startTime').kendoTimePicker().data('kendoTimePicker');

    endTime = e.container.find('#endTime').kendoTimePicker().data('kendoTimePicker');

 

    // attach change event handler via bind()

    startTime.bind('change', startTimeChange);

 

    // Define min/max range

    startTime.min('07:00');

    startTime.max('20:00');

    endTime.min('07:00');

    endTime.max('06:30');

}

The template (remotely called in) looks like this:-

<script type="text/x-kendo-template" id="timesheetTemplate">

    <div class="k-edit-label">

        <label for="Project">Project</label>

    </div>

    <div data-container-for="Project" class="k-edit-field">

       <input id="projectDrpDwn" name="Project" data-text-field="ProjectName" data-value-field="Id" data-bind="value:Project" style="width: 100%;" required validationMessage="Project is required" />

       <span class="k-invalid-msg" data-for="Project"></span>    

    </div>

 

    <div class="k-edit-label">

        <label for="WorkDate">Work Date</label>

    </div>

    <div data-container-for="WorkDate" class="k-edit-field">

        <input id="WorkDate" name="WorkDate" data-type="date" data-format="dd/MM/yyyy" data-bind="value:WorkDate" required  validationMessage="Work Date is required" />

        <span class="k-invalid-msg" data-for="WorkDate"></span>            

    </div>

 

    <div class="k-edit-label">

        <label for="startTime">Start Time</label>

    </div>

    <div data-container-for="StartTime" class="k-edit-field" style="width:132px">

        <input id="startTime" name="StartTime" data-format="HH:mm" data-bind="value:StartTime" data-role="timepicker" required validationMessage="A start time is required" />

        <span class="k-invalid-msg" data-for="StartTime"></span>                    

    </div>

 

    <div class="k-edit-label">

        <label for="endTime">End Time</label>

    </div>

    <div data-container-for="EndTime" class="k-edit-field" style="width:132px">

        <input id="endTime" name="EndTime" data-format="HH:mm" data-bind="value:EndTime" data-role="timepicker" required validationMessage="An end time is required" />

        <span class="k-invalid-msg" data-for="EndTime"></span>                           

    </div>

I've tried a combination of things, syntax changes but nothing seems to remove the error.

IE9 compatibility mode shows the same issue but in normal and other browsers (FF, Chrome, Safari) no problems.

Kendo UI version is v2012.3.1114

Thanks

[Sandra]

I think I've managed to fix this one thanks to this helpful blog post suggestion :-
http://www.kendoui.com/blogs/teamblog/posts/13-01-08/common_errors_in_kendo_ui_applications.aspx

I'd mistyped the variable name when declaring the startTime. Correcting that seems to have IE8 behaving.