kendo datepicker format MVVM

5 posts, 0 answers
  1. Jurica
    Jurica avatar
    9 posts
    Member since:
    Nov 2013

    Posted 16 May 2014 Link to this post

    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.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jurica
    Jurica avatar
    9 posts
    Member since:
    Nov 2013

    Posted 21 May 2014 in reply to Petur Subev Link to this post

    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
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 23 May 2014 Link to this post

    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!
     
  6. Jurica
    Jurica avatar
    9 posts
    Member since:
    Nov 2013

    Posted 23 May 2014 in reply to Petur Subev Link to this post

    thx,

    that`s it.

Back to Top
Kendo UI is VS 2017 Ready