DateTimePicker bound to a UTC DateTime and displaying local time

[Peter]

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?

[Vladimir Iliev]

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

[Mark]

[quote]Vladimir Iliev said: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. 

[/quote]

 

Is this still the case or will UTC DateTime be converted to Local date times?

[Stefan]

Hello, Mark,

This approach is still the recommended one in a scenario where the data cannot be modified directly on the server.

More details can be found in the answer written by the lead developer of the Kendo UI DateTime widgets:

https://stackoverflow.com/questions/35421255/kendo-datetimepicker-not-handling-utc-offset

Regards,
Stefan
Progress Telerik