DatePicker TimeZone Issue

[Chandan]

Hi Team,

I am using kendo date picker for in custom editor template for a kendo grid for pop up editing which is bind to datetime field of the model, now while displaying the value in the kendo date picker in custom editor template the value is displayed according to the user/client machine time zone which is changing the date value when the user is in some other time zone other than EST as application server is in EST , how to resolve the display issue in the kendo date picker for??
I am using the below code in custom editor template.
Please guide how to resolve this?


<div class="editor-field">
        @(Html.Kendo().DatePickeFor(m=>m.EndDate)
            .Format("MM/dd/yyyy")
            .Value(Model.EndDate)
           )
        @Html.ValidationMessageFor(m => m.EndDate)
</div>

[Mihaela]

Hello Chandan,

By default, the Grid creates its date objects on the client immediately after they are received from the server. Based on the current time, the default JavaScript date object automatically adds the time offset. The default behavior is such because the date objects demonstrate the same default behavior and most users expect to see the date in its current time zone.

That said, we have a dedicated example that shows how to keep the dates in UTC format on both server and the client when using a Grid with Ajax Binding. It requires custom logic otherwise the Grid will display the dates in local time zone. You can follow the same approach to keep the dates in EST format:

Use UTC Format on Both Client and Server when using Dates in Grid

Alternatively, you can handle the Edit event of the Grid, access the DatePicker editor's value, and convert it to the desired timezone:

function onEdit(e) {
  if(!e.model.isNew()) {
    var endDateEditor = $("#EndDate").data("kendoDatePicker");
    var endDate = endDateEditor.value(); // current value (in local)
    var localOffset = new Date().getTimezoneOffset(); //get the local timezone offset in minutes
    var estDate= kendo.timezone.convert(endDate, localOffset, "EST"); // Convert the date to EST by using the "kendo.timezone" (https://docs.telerik.com/kendo-ui/api/javascript/timezone)
    endDateEditor.value(estDate); // Update the DateTimePicker value
    e.model.set("EndDate", estDate); // Update the underlying data item of the Grid, which is in edit mode
  }
}

Regards,
Mihaela
Progress Telerik