Kendo control datepicker doesn't understand dateformat in MVVM - kendo-ui

Question

I have the following code:
<input data-role="datepicker" data-bind="value:referralData.Referral.from_date" />
With the value to bind as such:
from_date: "2014-01-01T00:00:00"
In the object and it doesn't bind anymore.
I have tried:
<input data-role="datepicker" data-bind="value:referralData.Referral.from_date, parseFormats:'YYYY-MM-DD\Thh:mm:ss'" />
But it states that: Uncaught Error: The parseFormats binding is not supported by the DatePicker widget. So I believe I have a syntax error that I am missing.
Does anyone know how to tell the datepicker to pick up this date?

Answer 1

data-bind is for live-binding options. If all you want to do is use the configuration option, you can use data-parse-formats:
<input data-role="datepicker"
data-parse-formats="YYYY-MM-DDThh:mm:ss"
data-bind="value:referralData.Referral.from_date" />
Also, if you want to use a 24 hour clock, you should use the this formatting config for time: HH:mm:ss

Answer 2

The solution by #Lars works, but the date format specifier is wrong (as of Kendo version 2014.3.119). It should be yyyy-MM-ddTHH:mm:ss (lower case for year and day and upper case for hour):
<input
data-role="datepicker"
data-bind="value:referralData.Referral.from_date"
data-parse-formats="yyyy-MM-ddTHH:mm:ss" />
And as a completion, if sometimes you need to, you can in fact pass more than one format, according to the documentation, like this:
<input
data-role="datepicker"
data-bind="value:referralData.Referral.from_date"
data-parse-formats="['yyyy-MM-ddTHH:mm:ss','yyyy-MM-dd']" />

Answer 3

You can create a custom binding for date format:
Custom Binding
kendo.data.binders.widget.dateFormat = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function () {
var that = this,
value = that.bindings["dateFormat"].get(); //get the value from the View-Model
$(that.element).data("kendoDatePicker").setOptions({
format: value
}); //update the widget
}
});
HTML
<div id="report1" data-role="view" data-model="APP.models.report1">
<input data-role="datepicker" data-bind="value: start_date, dateFormat: date_format" />
</div>
Model
window.APP = {
models: {
report1: kendo.observable({
start_date: new Date(),
date_format: "dd/MM/yyyy",
}),
}
};
var app = new kendo.mobile.Application($(document.body), {
initial: "report1",
skin: "default",
});