This is a migrated thread and some comments may be shown as answers.

kendo datepicker format MVVM

5 Answers 390 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jurica
Top achievements
Rank 1
Jurica asked on 16 May 2014, 10:22 AM
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.

5 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 May 2014, 07:34 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jurica
Top achievements
Rank 1
answered on 21 May 2014, 05:28 PM
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
0
Petur Subev
Telerik team
answered on 23 May 2014, 10:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jurica
Top achievements
Rank 1
answered on 23 May 2014, 05:00 PM
thx,

that`s it.

0
Robert
Top achievements
Rank 2
answered on 24 May 2019, 08:10 PM

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",
});
Tags
Date/Time Pickers
Asked by
Jurica
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Jurica
Top achievements
Rank 1
Robert
Top achievements
Rank 2
Share this question
or