DateTimePicker bound to a UTC DateTime and displaying local time

2 posts, 0 answers
  1. Peter
    Peter avatar
    9 posts
    Member since:
    Dec 2013

    Posted 06 Aug 2015 Link to this post

    I have an MVC5 application running the latest version of Kendo. I have a ViewModel with a DateTime property:

    MyViewModel.cs

    private DateTime _startDate;
    public DateTime StartDate
    {
        get { return _startDate; }
        set
        {
            if (value.Kind == DateTimeKind.Local)
                value = value.ToUniversalTime();
            _startDate = new DateTime(value.Ticks, DateTimeKind.Utc);
        }
    }​

    And in my controller I am instantiating this VM and setting the StartDate property to UtcNow:

    MyController.cs

    public virtual ActionResult ​Index()
    {
        var vm = new MyViewModel { StartDate = DateTime.UtcNow };
        return View(vm);
    }

    And in my view I create a KendoDateTimePicker and bind it to my StartDate property in my model:

    Index.cshtml

    @model MyViewModel
     
    @using (Html.BeginForm("Index", "MyController", FormMethod.Post, new { @role = "form" }))
    {
        @(Html.Kendo().DateTimePickerFor(x => x.StartDate)
            .Format("yyyy/MM/dd HH:mm")
            .TimeFormat("HH:mm")
        )
        <button type="submit">Submit</button>
    }

     The datetimepicker will display the time in UTC, and when the form is submitted the time returned to the controller is in UTC.

     However I'm looking at accomplishing two things:

    1. Display local time to the client in the date time picker

    2. Return the value of the date time picker in UTC to the server

     This means that somewhere on the client side the conversion from UTC to Local time must be made for display purposes. Then another conversion from Local Time to UTC when posting back the date to the server.

    Is there anyway of having the DateTime picker display a local datetime when bound to a UTC date? If not, is there some event or hook I can use to pre-process the value that the datetimepicker is bound to on the client side?

    Similar question for when submitting the form. Is there an event or hook I can use to have the value of the datetimepicker be returned as its UTC equivalent?

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Aug 2015 Link to this post

    Hi Peter,

    The desired behavior of converting the bind dates is not supported out of the box by the Date/TimePickers and custom solution would be needed. For example you can use document "ready" event handler to get the widget object and update it's value with the current client timezone offset. Later on form submission you can remove the client timezone offset before sending the values to the server. 

    e.g.:
    var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
    var dateTimePicker - $("#dateTimePicker").getKendoDateTimePicker();
    var value = dateTimePicker.value();
    dateTimePicker.value(new Date(value.getTime() + offsetMiliseconds));

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top