How to handle Kendo UI MVVM Date Picker Initialisation

Question

I have 2 views ...

One for a numeric text box:

@Html.TextBoxFor(m => m, new { 
    @class = "k-input",
    data_bind = "value: " + ViewData.TemplateInfo.HtmlFieldPrefix,
    data_role = "numerictextbox",
    data_format = @"\#",
    data_decimals = "0"
})
@Html.ValidationMessageFor(m => m)

And one for a datepicker:

@Html.TextBoxFor(m => m, new
{
    @class = "k-input",
    data_bind = "value: " + ViewData.TemplateInfo.HtmlFieldPrefix,
    data_role = "datepicker",
    data_format = "dd MMM yyyy",
    type = "date"
})
@Html.ValidationMessageFor(m => m)

Why does the numeric box one work and the datepicker not work?

Some additional information:

I am using Knockout Kendo to MVVM bind a model to the rendered field. so On the client side I end up with a container element that contains both of these field types.

The data is coming from an OData endpoint so dates are in the standard ISO format.

The javascript to support this is ...

$(function () {
    var model = new kendo.observable({
        data: null,
        fetch: function (callback) {
            $.get("...", function (res) {
                res.date = kendo.parseDate(res.date);
                result.data = res;
                if (typeof callback != 'undefined') { callback(); }
            });
         }
    });
    model.fetch(function () {
        var component = $("#...");
        kendo.bind(component, model.data);
    });
});

Do datepickers need to somehow be treated differently to numeric boxes? My result is a standard html date field, which chrome attaches its basic date picker to and a numerictextbox with the kendo up down arrows.

I would expect both to be standard kendo fields after this (unless I missed something).

Answer 1

Ok so it turns out that none of this was at fault and in fact this is the correct way to init both controls with a MVVM bound object.

the problem however was with another control on the page (which was between the int and date controls) which meant the binding process got interrupted after it had initialised the numeric box but before the date picker.

I feel less crazy now.