[OPEN] [3.3.0] [#1405] Timezone Problem

2 Attachment(s)

[OPEN] [3.3.0] [#1405] Timezone Problem - Chrome

Hi all,

There is a bug with datetime types in Chrome with ExtJs. I found some similar cases but it didn't solve my issue.

http://forums.ext.net/showthread.php...-Date-Timezone
http://forums.ext.net/showthread.php...ing-a-DateTime

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.DataSource = this.Data; } foreach (var item in this.Data) { Response.Write(((object[])item)[0] + "<br><br>"); } } private object[] Data { get { return new object[] { new object[] { DateTime.Parse("01.01.2014") }, new object[] { DateTime.Parse("01.01.2016") }, new object[] { DateTime.Parse("02.01.2016") }, new object[] { DateTime.Parse("06.01.2017") }, new object[] { DateTime.Parse("01.01.2017") }, }; } } </script> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <ext:ResourceManager runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="700" Height="350"> <Store> <ext:Store ID="Store1" runat="server" IDMode="Static"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Tarih" Type="Date" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:Column runat="server" ID="grid" Width="400" DataIndex="Tarih"> <%-- <Renderer Fn="Ext.util.Format.dateRenderer('d.m.Y h:i:s')" />--%> </ext:Column> </Columns> </ColumnModel> </ext:GridPanel> </body> </html>

How can I solve this problem?

Thanks,

Vzx

Hello @vzx!

It seems I can't reproduce this issue in my time zone. How exactly are you switching between time zones to trigger the issue?

Hi Fabricio,

My time zone is (UTC +03:00) Ä°stanbul. Can you test with this timezone?

Thanks,

Vzx

In some dates, it adds one hour.

Like;
01.01.2016 01:00
02.01.2016 00:00

Thanks,
Vzx

Hello @vzx!

I don't see Jan 1st 2016 with the added hour in the screenshot you provided on your initial post. Maybe you changed your code and it broke that part somehow? Probably using formats C#-side and mm instead of MM for month?

If I use the code as you provided, with Turkey time zone and regional settings, I read months in place of days, so I changed the code to use ParseExact somewhat like this:

Code:

return new object[] { new object[] { parseDate("01.01.2014") }, new object[] { parseDate("01.01.2016") }, new object[] { parseDate("02.01.2016") }, new object[] { parseDate("06.01.2017") }, new object[] { parseDate("01.01.2017") } };

with parseDate() as

Code:

private DateTime parseDate(string date) { return DateTime.ParseExact(date, "dd.MM.yyyy", CultureInfo.InvariantCulture); }

All I see is that the column value assumes different time zone depending on the year and for Turkey, it does not assume daylight saving times for 2014 and 2017. But that's an information not even present in the converted date, and date and time shows exactly as provided.

Maybe you want to use ext:DateColumn instead of ext:Column for displaying dates? The received dates are in format like 2017-01-06T00:00:00 (for Jan 6th, 2017, for example), thus they are correct in the store and the conversion is happening when filling the textual column with the data thru the default renderer. You should either use a custom renderer or the DateColumn, in this case.

1 Attachment(s)

Hi,

I changed code as your suggestions. You can see result attached. Unfortunately still same. I added new screenhot.

In IE, there is no problem. But it adds one hour for somedays in chrome. I had added two of them. One of them is wrong, other one is ok.

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.DataSource = this.Data; } foreach (var item in this.Data) { Response.Write(((object[])item)[0] + "<br><br>"); } } private object[] Data { get { return new object[] { new object[] { DateTime.ParseExact("01.01.2014","dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture) }, new object[] { DateTime.ParseExact("01.01.2016","dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture) }, new object[] { DateTime.ParseExact("02.01.2016","dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture) }, new object[] { DateTime.ParseExact("06.01.2017","dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture) }, new object[] { DateTime.ParseExact("01.01.2017","dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture) }, }; } } </script> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <ext:ResourceManager runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="700" Height="350"> <Store> <ext:Store ID="Store1" runat="server" IDMode="Static"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Tarih" Type="Date" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:DateColumn runat="server" ID="grid" Width="400" DataIndex="Tarih"> <Renderer Fn="Ext.util.Format.dateRenderer('d.m.Y h:i:s')" /> </ext:DateColumn> </Columns> </ColumnModel> </ext:GridPanel> </body> </html>

Thanks,
Vzx

Hello!

Interesting, I'll give it a deeper thought and return to you!

First thing I can see is you are using a 12h format without specifying am/pm, I believe you want to review ExtJS Ext.Date formats here: Ext.Date documentation.

The format table is in the summary.

And hello again!

I'm afraid there's a major issue with date handling using Turkey time zone. Am I correct to assume there were changes in daylight saving policies in the last few years? The only reliable way I found to convert the dates is using simple string column and setting the model's data type to string as well.

This may hurt sorting, and if you require sorting you'll have to add a field to the model containing the integer representation of the dates and then sort by this content (you'll find threads here pointing how to sort columns based on data different than column's dataIndex).

Here's what I've come up with to workaround the issue. For other forum discussions I believe this issue happens only on select time zones, and it wouldn't be a problem if you stored your date values with time zone information. You would probably notice time differences as probably different parts of the application would assume different time zones depending of the year.

For example, it seems windows might assume daylight saving time for January 2014 while the browser doesn't. Or the other way around!.. It feels like more a "political" problem than anything (if I am correct about the daylight saving times' rules having been changed in the past or future years in Turkey).

Well, here's the code I ended up with:

Code:

<%@ Page Language="C#" %> <%@ Import Namespace="System.Globalization" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.Store1.DataSource = this.Data; } foreach (var item in this.Data) { Response.Write(((object[])item)[0] + "<br><br>"); } } private DateTime parseDate(string date) { return DateTime.ParseExact(date, "dd.MM.yyyy", CultureInfo.CurrentCulture, DateTimeStyles.None); } private object[] Data { get { return new object[] { new object[] { parseDate("01.01.2014") }, new object[] { parseDate("01.01.2016") }, new object[] { parseDate("02.01.2016") }, new object[] { parseDate("06.01.2016") }, new object[] { parseDate("06.01.2017") }, new object[] { parseDate("01.01.2017") } }; } } </script> <!DOCTYPE html> <html> <head runat="server"> <title></title> <script type="text/javascript"> var renderDate = function (val) { var year = val.substr(0, 4); var month = val.substr(5, 2); var day = val.substr(8, 2); var hour = val.substr(11, 2); var minute = val.substr(14, 2); var second = val.substr(17, 2); if (second.length != 0) { return (new Date(year, month, day, hour, minute, second, 0)).toString() } return "error parsing date"; } </script> </head> <body> <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" /> <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="700" Height="350"> <Store> <ext:Store ID="Store1" runat="server" IDMode="Static"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Tarih" Type="String" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:Column runat="server" Width="200" DataIndex="Tarih" /> <ext:Column runat="server" ID="dc1" Width="400" DataIndex="Tarih"> <Renderer Fn="renderDate" /> </ext:Column> </Columns> </ColumnModel> </ext:GridPanel> </body> </html>

We'll completely skip time zone conversions and force the server provided time to be used as if it were the local time. This does not work with other nicer approaches as the 1 hour is added -- probably due to difference on daylight saving calculations between server and client.

Hope this helps! We've logged this bug under #1405 but we're looking forward for your feedback whether this workaround is enough for you for now.

Hi Fabricio,

Yes, Turkey changed it's timezone +02 to +03 about two months ago.

Thanks for workaround but I have to change all datefields, grids with date etc. to apply this. And this is not suitable for me. Can you suggest another way please?

Thanks,
Vzx

Hello! At a first glance I can't think anything not involving flattening all dates and handling the conversions yourself. But maybe it will work fine if you write a custom renderer that "normalizes" the dates received?

Probably will have to manually subtract 1 hour from times comprising the broken dates, or maybe just a "blinder" approach of checking provided versus. I'm not sure which approach would be feasible for you as to reduce the changes overhead. I can't see a solution which won't involve either changing the column data type or the renderer used on them, or an override to the date conversion function, behaving differently on affected web browsers?

As for what I can see, seems some browsers are affected by this and some others aren't. For instance, seems both Chrome and Edge are, while Internet Explorer (on windows 8 at least) or Safari on Mac OS X aren't? I only tested this on Windows 10 and both Chrome and Edge triggers the issue. Not sure about other browsers at the moment.