Управляющий датами Kendo datepicker не понимает формат даты в MVVM

Question

У меня есть следующий код:

 <input data-role="datepicker" data-bind="value:referralData.Referral.from_date" />

Со значением для привязки как таковой:

from_date: "2014-01-01T00:00:00"

В объекте и он больше не связывается. Я пытался:

       <input data-role="datepicker" data-bind="value:referralData.Referral.from_date, parseFormats:'YYYY-MM-DD\Thh:mm:ss'" />

Но в нем говорится: Uncaught Error: привязка parseFormats не поддерживается виджетом DatePicker. Поэтому я считаю, что у меня есть синтаксическая ошибка, которую я пропускаю.

Кто-нибудь знает, как сказать DatePicker забрать эту дату?

Answer 1

Решение от @Lars работает, но спецификатор формата даты неверен (по состоянию на версию Kendo 2014.3.119). Так должно быть yyyy-MM-ddTHH:mm:ss (нижний регистр для года и дня и верхний регистр для часа):

<input
    data-role="datepicker" 
    data-bind="value:referralData.Referral.from_date" 
    data-parse-formats="yyyy-MM-ddTHH:mm:ss" />

И в качестве завершения, если иногда вам нужно, вы можете фактически передать более одного формата, в соответствии с документацией, например:

<input 
    data-role="datepicker" 
    data-bind="value:referralData.Referral.from_date" 
    data-parse-formats="['yyyy-MM-ddTHH:mm:ss','yyyy-MM-dd']" />

Answer 2

data-bind для опций live-привязки. Если все, что вы хотите сделать, это использовать опцию конфигурации, вы можете использовать data-parse-formats:

<input data-role="datepicker" 
 data-parse-formats="YYYY-MM-DDThh:mm:ss" 
 data-bind="value:referralData.Referral.from_date" />

Кроме того, если вы хотите использовать 24-часовые часы, вы должны использовать этот формат конфигурации для времени: HH:mm:ss

Answer 3

Вы можете создать собственную привязку для формата даты:

Пользовательская привязка

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>

модель

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",
});