DateTimePicker bound to a UTC DateTime and displaying local time

1 Answer 4723 Views
Date/Time Pickers
Peter
Top achievements
Rank 1
Peter asked on 06 Aug 2015, 08:12 PM

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?

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 11 Aug 2015, 06:24 AM
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
Mark
Top achievements
Rank 1
commented on 13 Nov 2017, 10:50 PM

[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
Telerik team
commented on 15 Nov 2017, 11:07 AM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
Peter
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or