kendo datepicker format MVVM

[Jurica]

Hi,

I know there is plenty of question about formatting Date in DatePicker but I just can`t get it to work.

I have this:

View(razor)
<script src="~/Scripts/kendo/2014.1.415/cultures/kendo.culture.hr-HR.min.js"></script>

<script type="text/javascript">
   kendo.culture("hr-HR");
<script type="text/javascript">

<div id="form-container">
@Html.Kendo().DatePickerFor(m => ugrozenostSvojte.DatumProcjene).Events(ev => ev.Change("onPickerChange")).Culture("hr-HR").HtmlAttributes(new { data_bind = "value: selectedUzrok.DatumProcjene" })

<button id="save">Save</button>
</div>
<script type="text/javascript">
 $(document).ready(function () {
...

kendo.bind($("#form-container"), viewModel);

viewModel.productsSource.read();

$("button").click(function (e) {
            var validator = $("#form-container").kendoValidator();
         if (validator.validate() == true) {
                viewModel.productsSource.sync();
            }
});

});
<script type="text/javascript">

webconfig
 <globalization uiCulture="hr-HR" culture="hr-HR" enableClientBasedCulture="true" />
 
 This part about binding, selecting value from datepicker works fine. But in the value o datepicker is always something like:
 "Wed May 07 2014 00:00:00 GMT+0200 (Central European Daylight Time)".
 
 This same value have been sent to server. Of course, my model in the backend is datetime and is null.

 And if I put some format on datepicker (like .Format("{0:dd.MM.yyyy}")) the I am getting validation message: "The field DatumProcjene must be a date."
 
controller - model.DatumProcjene is null

  public ActionResult UpdateUgrozenostiSvojte(customDataSourceRequest request, UgrozenostSvojteViewModel model)
        {
            var ugrozenostSvojte = this.UgrozenostSvojteService.Update(model);

            return Json(ugrozenostSvojte, JsonRequestBehavior.AllowGet);
        }


model
 public class UgrozenostSvojteViewModel
    {
public DateTime DatumProcjene { get; set; }
}

Please help.

[Petur Subev]

Hello Jurica,

How the Date field is sent to the server has nothing with the format that the DatePicker format. The DatePicker widget helps you to create a control that will allow the user to update the underlying Date field from your viewmodel. The viewmodel is not aware what is the format of the widget(s) bound to its fields.

Thus said you need to configure how the dataSource sends the Date field to the server, by default it is using ToString() (this is why you see formats such as "Wed May 07 2014 00:00:00 GMT+0200 (Central European Daylight Time)".

To control how the datasource sends the different fieds to the server you should use the parameterMap function of the transport, you can 'prepare' the format that your server side technology (MVC in your case) expects. On a side note you can use the kendo format method.

Kind Regards,
Petur Subev
Telerik

 

 

[Jurica]

Thank you Petur.

That is solution.(part of)

I have another, related, question. My controller return date in following format :

{
      "IdUgrozenostSvojte": 6224,
      "IdSvojte": 696,
      "IdPopulacije": 26,
      "NazivPopulacije": "+ PI06: Populacija rijeke Mure i Drave",
      "IdRazina": 1,
      "NazivRazina": "Globalna",
      "RazinaNapomena": "123yt",
      "IdKatUgrozenosti": 1,
      "OznUgrozenosti": "EX ",
      "NazUgrozenosti": "Izumrle",
      "DatumProcjene": "2014-05-22T00:00:00",
      "RazloziPromjeneKat": "5559797777",
      "EvaluatorProcjene": null,
      "DatumEvaluacije": "2014-05-31T00:00:00",
      "IskoristavanjeTrgovina": null,
      "UzrociUgrozenosti": "123",
      "PostojeceMjOcuvanja": "345",
      "PotrebneMjOcuvanja": "456",
      "SazetakProcjene": "uyiutojg"
    }

The problem is with "DatumProcjene" i "DatumEvaluacije" fields. DateTimePickerFor is not displaying data. What could be the problem?

Thx

[Petur Subev]

Hello Jurica,

The fields that you return from the server are actually strings, you will need to parse them into Date objects before bind their values to the date/time picker controls. You can use the kendo.parseDate method to do this for you.

http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateparsing

e.g.

kendo.parseDate("2014-05-22T00:00:00")

Notice that creating date from such string will be automatically coverted according to the browser timezone

in other words the example below will be like so in my browser (I am in Bulgaria UTC +3):

Thu May 22 2014 00:00:00 GMT+0300 (FLE Daylight Time)

Once the field is a date I see no problem to bind it to such widget like demonstrated in this demo:

http://demos.telerik.com/kendo-ui/web/mvvm/widgets.html

Kind Regards,
Petur Subev
Telerik

 

 

[Jurica]

thx,

that`s it.

[Robert]

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