Kendo Grid Automatically changing Timezone

问题

On my Kendo Grid I recieve date time from server. On the client end, this time is changed to client's timezone and that is displayed. How can I show the same time from the server to the client.

the following is my kendo code for binding the datetime.

columns.Bound(p => p.CreateDate).Format("{0:dd/MM/yyyy hh:mm:ss}").Sortable(true).Width(180);

回答1:

Since the dates are created on the client when the response from the server is returned - the dates are always created with an offset according to the timezone of the browser

This will help you:

http://www.kendoui.com/code-library/mvc/grid/using-utc-time-on-both-client-and-server-sides.aspx

回答2:

This was my solution

on controller I did like this

DateTime time = DateTime.Now();

string x = time.ToString("MM/dd/yyyy hh:mm:ss tt");

On View

columns.Bound(p => p.x);

It is sortable also.

回答3:

For example your client machine is in Sydney and your code is deployed in India

Saving datetime to DB: While passing the date time from client side(javascript) to server(.net) pass it as string, so that it won't get converted to server's time(UK) while saving into DB

If your datetime field is non editable then follow solution 1 otherwise solution 2 would be the right choice

Retrieving from DB:

Solution 1:

Client side Code:

cols.Bound(c => c.ExamDate).ClientTemplate(("#= ExamDateString #")).Hidden(false).Filterable(x => x.Cell(cell => cell.ShowOperators(false).Operator(StringOperator.eq.ToString())));

Server Side Code:

Server Model property for format

public string ExamDateString 
    { 
        get 
        { 
        return ExamDate.HasValue ? ExamDate.Value.ToString("dd/MM/yyyy hh:mm:ss") : string.Empty; 
        } 
    }

Solution 2:

Retrieving from DB:

Client side code:

$.ajax({ 

            type: "POST", 

            url: '@Url.Action("Controller action method name", "Controller name")', 

            data: { "clientMachineTimeZoneOffsetInMinutes ": (new Date()).getTimezoneOffset() }, 

                success: function (data) { 

                    } 

         });

Server side code:

//Server Timezone(India) Offset minutes : 330

//Client Timezone(Sydney) Offset minutes : -600

//Difference between Client and Server timezone offset minutes = -270

var serverTimeZoneOffsetInMinutes = DateTimeOffset.Now.Offset.TotalMinutes;
var serverAndClientMachineTimeZoneDifferenceInMinutes = clientMachineTimeZoneOffsetInMinutes + serverTimeZoneOffsetInMinutes; 

//Update your date time field with this offset minutes
ExamDate = ExamDate.Value.AddMinutes(serverAndClientMachineTimeZoneDifferenceInMinutes);

回答4:

Another option is to use custom JsonResult and convert the date to ISO format.

public class IsoDateJsonResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }

        HttpResponseBase response = context.HttpContext.Response;

        if (!String.IsNullOrEmpty(ContentType))
        {
            response.ContentType = ContentType;
        }
        else
        {
            response.ContentType = "application/json";
        }
        if (ContentEncoding != null)
        {
            response.ContentEncoding = ContentEncoding;
        }
        if (Data != null)
        {
            var isoConvert = new IsoDateTimeConverter();
            response.Write(JsonConvert.SerializeObject(Data, isoConvert));
        }
    }

Then change your Controller method to return IsoDateJsonResult instead of ActionResult/JsonResult.

回答5:

In my case the server is in CST and I am in MST. I needed to persist my SQL Server data to the browser and was getting 02/08/18 23:57 as 02/08/18 22:57 on my Kendo Grid. So I did this, hope it helps:

Checks User / Browser's timezone offset

Gets difference in hours from server timezone offset

Looks at a column on the Kendo Grid with class .dbDate

Grabs the date in that cell (displayedTime) from data object

Uses Moment.js to Convert (convertedTime) it based on the difference (diff) in hours we pass it.

Formats convertedTime to desired format i.e. 02/08/18 23:57

Add 1 to i so the next date in the object gets adjusted

Passes the Grid back the updated date and time.

Must run last on page/grid load/update.

function getDateOffset() {
    var date = new Date();
    var offset;
    var diff;
    offset = date.getTimezoneOffset()
    if (offset > 360) { //360 = CST
        diff = +(offset - 360) / 60
    } else if (offset < 360) {
        diff = -(360 - offset) / 60
    } else {
        diff = 0
    }

    $(".dbDate").each(function (i) {

        var grid = $('#Grid').data('kendoGrid');
        var displayedTime = grid.dataSource.data()[i].TicketDateTime
        var convertedTime = new moment(displayedTime).add(diff, 'hours').toDate();
        var originalTime = moment(convertedTime).format("MM/DD/YY HH:mm");

        i + 1
        $(this).html(originalTime)
    })
}

回答6:

Solution 2 in my above answer, daylight saving hour is getting added if you are not in daylight saving period but you are trying to access the date which falls in daylight saving period, rewriting the solution 2 to support daylight saving period aswell

Client side code to update timezone name:

    $.ajax({
            type: "POST",
            url: '@Url.Action("Controller action method name", "Controller name")',
            data: { "timeZoneName": Intl.DateTimeFormat().resolvedOptions().timeZone },
            success: function (data) {
                    }
            });

Controller method name to update the timezone in session:

   public ActionResult actionMethod(string timeZoneName)
    {
        Session["timeZoneName"] = Convert.ToString(timeZoneName);
        return Json(new { success = true });
    }

App config app setting entries:

<add key ="Europe/London"  value ="GMT Standard Time" />

Here the key is client time zone name returned by browser and maintained in session here, we have to add entries for all time zone

Place the below code in the controller action method to get the exam date:

var clientMachineTimeZoneName = Convert.ToString(Session["timeZoneName"]);

Get the sever timezone id from config for the corresponding time zone which we got from client side
var timeZoneId = ConfigurationManager.AppSettings[clientMachineTimeZoneName];

TimeZoneInfo clientTimezoneDetails = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);

var clientTimeZoneOffsetMinutes = clientTimezoneDetails.GetUtcOffset(x.ExamDate.Value).TotalMinutes * -1;
var serverAndClientMachineTimeZoneDifferenceInMinutes = clientTimeZoneOffsetMinutes + TimeZoneInfo.Local.GetUtcOffset(x.ExamDate.Value).TotalMinutes;

//Update your date time field with this offset minutes
ExamDate = ExamDate.Value.AddMinutes(serverAndClientMachineTimeZoneDifferenceInMinutes);

来源：https://stackoverflow.com/questions/18955191/kendo-grid-automatically-changing-timezone