Kendo TimePicker MVVM binding to OData Result

Question

I have a model from an odata endpoint that I bind to a form and the only control that wont play ball is the time picker ...

Here's initialisation code:

my.api.get("odata url", function (res) {
   var model = new kendo.observable(res);
   var component = $("#editor");
   kendo.bind(component, model);
   $("#editor").data("model", model);
});

And here's an example of a working Date picker fields markup in the form:

<li class="Field">
            <label for=""> End</label>
            <div class="value">
<span class="k-widget k-datepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: End" data-format="dd MMM yyyy" data-role="datepicker" data-val="true" data-val-required="The End field is required." id="End" name="End" type="text" value="2020-11-17" style="width: 100%;" role="combobox" aria-expanded="false" aria-owns="End_dateview" aria-disabled="false" aria-readonly="false"><span unselectable="on" class="k-select" role="button" aria-controls="End_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="End" data-valmsg-replace="true"></span>
            </div>
        </li>

And here's one of my broken time picker fields:

<li class="Field">
            <label for="Default_Calculation_Time">Default Calculation Time</label>
            <div class="value">

<span class="k-widget k-timepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: AutoCalculationTime" data-format="hh:mm tt" data-role="timepicker" data-val="true" data-val-required="The Default Calculation Time field is required." id="AutoCalculationTime" name="AutoCalculationTime" type="text" value="02:30 PM" role="combobox" aria-expanded="false" aria-owns="AutoCalculationTime_timeview" aria-disabled="false" aria-readonly="false" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="AutoCalculationTime_timeview"><span unselectable="on" class="k-icon k-i-clock">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="AutoCalculationTime" data-valmsg-replace="true"></span>

            </div>
        </li>

Both of the fields above are bound to UTC formatted DateTimeOffsets from the OData endpoint.

Here's an example of a model object that my form is bound to (model in the above js code):

{
  @odata.context: "https://apitest.corporatelinx.com/ACOFI/$metadata#Programme/$entity"
  AutoCalculationTime: "2000-01-01T14:30:00Z"
  AutoCutoffTime: "2000-01-01T14:00:00Z"
  Description: "ACOFI DEMO Buyer Programme"
  End: "2020-11-17T18:22:46.953Z"
  FundCount: 3
  Id: 3
  Name: "ACOFI Demo Programme"
  Start: "2015-11-17T18:22:46.953Z"
  _events: Object
  uid: "28dd1327-ed4a-4b24-9418-8b86d143acd7"
  __proto__: i
}

So my question is ... what black magic needs to be performed in order to get Kendo TimePicker controls to behave like every other control and work?

score 0 · Accepted Answer · answered Jan 26 '16 at 16:47

0

Ok I figured it out ...

turns out kendo time pickers cannot be bound to UTC datetimeoffset strings but if I parse them in to javascript date objects before binding then bind as normal kendo can figure this out.

Has a bad code smell to me ... IMO I think that telerik should at least handle UTC common strings automatically as well as date objects but its not the end of the world, just means I have to "pre-process" my model data before giving it to kendo.

Yay, another day in the life of Kendo'isms!

answered Jan 26 '16 at 16:47

War

8,539
4
46
98

This may be a bit off-topic, but I've been using Kendo date pickers on my project and I recently discovered Kendo ships with built-in date parsers and formatters. Kept me from having to get another open source date management library. http://docs.telerik.com/kendo-ui/framework/globalization/dateparsing & http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting – Ageonix Jan 26 '16 at 23:29
I just use the JS Date.parse(dateString) function, works perfectly fine with UTC dates formatted correctly. I guess my point in the answer was that kendo should just do this forme given a string that I want to bind to a picker / a value in the elements value attribute to use. IMO this is a bug in the kendo framework. – War Jan 27 '16 at 13:22

Kendo TimePicker MVVM binding to OData Result

1 Answers1