Hello,
The kendo date format do not seem to take the time zone into account when parsing or formatting UTC dates.
This simple test reproduces it:
The kendo date format do not seem to take the time zone into account when parsing or formatting UTC dates.
This simple test reproduces it:
$("#grid").kendoGrid({ dataSource:{ data:[ { utcdate: kendo.parseDate("2012-04-18 11:23:45Z", "u"), localdate: new Date() } ], schema:{ model:{ fields:{ utcdate:{ type:"date" }, localdate:{ type:"date" } } } } }, height:360, groupable:true, scrollable:true, sortable:true, pageable:true, columns:[ { field:"utcdate", title:"local from UTC", format:"{0:yyyy-MM-dd HH:mm:ss}", width: 150 }, { field:"utcdate", title:"UTC from UTC", format:"{0:u}", width: 150 }, { field:"utcdate", title:"UTC-S from UTC", format:"{0:s}", width: 150 }, { field:"localdate", title:"local from local", format:"{0:yyyy-MM-dd HH:mm:ss}", width: 150 }, { field:"localdate", title:"UTC from local", format:"{0:u}", width: 150 }, { field:"localdate", title:"UTC-S from local", format:"{0:s}", width: 150 } ]});- Parsing the 0-based UTC date apparently ignores the timezone and creates a different local date that is offset by the timezone the user is in. The "local from UTC" column should display the local time, not the 0-based UTC time.
- Formatting a local JavaScript date to a UTC date produces a date without taking into account the timezone. All "from local" columns are displaying the same hours, while they should be offset.
Looking at the Kendo UI source code for parsing dates, it clearly does not have a check for the "Z" timezone marker. And is also missing a UTC() function call to create the date. The formatting functions also don't use the JavaScript Date UTC functions.
Can this be fixed globally somehow?
Best Regards,
Wannes.
9 Answers, 1 is accepted
0
Hello Wannes,
I will suggest you share your throughts in our UserVoice. Thus more people can see it and vote for it.
Regards,
Georgi Krustev
the Telerik team
Currently the parseDate method does not support parsing of the UTC dates. Nevertheless you can easily parse it using the Date object:
new Date("2012-04-18 11:23:45Z")Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Wannes
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2012, 08:56 AM
Hello Georgi,
Unfortunately the code:
does not work that well. IE7, IE8 produce NaN, and FireFox produces "Invalid Date".
What I use instead (and what is supported as of IE9 and all the other modern browsers), is the ISO-8601 non-zero based format:
And then I add a Date contructor polyfill for IE7, IE8.
Still, the Kendo UI date formats "u" and "s" are misleading. They use the Z for zero-based UTC, but produce a non-zero based one.
For now, I will try the UserVoice website. Once I get the commercial license, I will use a support ticket ;-)
Thanks!
Best Regards,
Wannes.
Unfortunately the code:
new Date("2012-04-18 11:23:45Z");What I use instead (and what is supported as of IE9 and all the other modern browsers), is the ISO-8601 non-zero based format:
new Date("2012-04-18T11:23:45+0200");Still, the Kendo UI date formats "u" and "s" are misleading. They use the Z for zero-based UTC, but produce a non-zero based one.
For now, I will try the UserVoice website. Once I get the commercial license, I will use a support ticket ;-)
Thanks!
Best Regards,
Wannes.
0
Royce
Top achievements
Rank 1
Rank 1
answered on 04 May 2012, 10:57 AM
great , this is very good , I agree you are good! Just fantastic! Your penning style is admirable and the way you addressed the topic with grace is commendable.Since i am intrigued, I presume you are an expert on this subject. I am subscribing to your incoming updates from now on.
0
Wannes
Top achievements
Rank 1
Rank 1
answered on 04 May 2012, 11:21 AM
Thanks Royce, just doing my job.
I have been pushing for Kendo UI as the new recommended UI product, and now need to make sure everything is in order ;-)
Cheers,
Wannes.
I have been pushing for Kendo UI as the new recommended UI product, and now need to make sure everything is in order ;-)
Cheers,
Wannes.
0
Chanaka
Top achievements
Rank 2
Rank 2
answered on 30 Aug 2012, 06:25 AM
It is a Simple Answer Use parameterMap and column format
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.Date);
options.Date = d.toString("yyyy-MM-dd");
return options;
}
}
{ field: "Date", title: "Date ", type: "date", format: "{0:dd/MM/yyyy}" }
result : 30/08/2012
Hope this will help all of you all
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.Date);
options.Date = d.toString("yyyy-MM-dd");
return options;
}
}
{ field: "Date", title: "Date ", type: "date", format: "{0:dd/MM/yyyy}" }
result : 30/08/2012
Hope this will help all of you all
0
Bobby
Top achievements
Rank 1
Rank 1
answered on 23 May 2014, 06:58 PM
While this seems to be mostly resolved in version 2014.1.416, it still doesn't seem to work with a UTC date using the ISO 8601 standard.
Is there any chance that the parseDate function can be updated to support the actual ISO 8601 format?
var myDate = kendo.parseDate("2014-05-21 00:00:00Z", "u");// Wed May 21 2014 00:00:00 GMT-0700 (Pacific Daylight Time)var myDate = kendo.parseDate("2014-05-21T00:00:00Z", "u"); // The actual ISO 8601 format// nullIs there any chance that the parseDate function can be updated to support the actual ISO 8601 format?
0
Hello Bobby,
kendo.parseDate supports ISO formats. As you probably know, kendo.parseDate method is designed to parse the date string using a specified date format. If method is called without any format, then the patterns defined in current Kendo culture used on the page along with different ISO 8601 formats will be used to parse the date string. In other words if you would like to parse ISO dates, you will not need to pass any format. Check this demo, which shows how to parse ISO dates.
Regards,
Georgi Krustev
Telerik
kendo.parseDate supports ISO formats. As you probably know, kendo.parseDate method is designed to parse the date string using a specified date format. If method is called without any format, then the patterns defined in current Kendo culture used on the page along with different ISO 8601 formats will be used to parse the date string. In other words if you would like to parse ISO dates, you will not need to pass any format. Check this demo, which shows how to parse ISO dates.
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bobby
Top achievements
Rank 1
Rank 1
answered on 27 May 2014, 02:25 PM
Hi Georgi,
Your demo does not produce the same date:
which makes it somewhat required to pass in the "u" format to get the parseDate function to not auto-adjust for a timezone that hasn't been included in the string. As such, it would be nice if the "u" format also accepted the more standard T delimiter rather than requiring me to manually replace it with a space in every instance that I need to parse the date.
Your demo does not produce the same date:
var date1 = kendo.parseDate("2014-05-21 00:00:00Z", "u");console.log("u: ", date1);var date2 = kendo.parseDate("2014-05-21T00:00:00Z");console.log("ISO: ", date2);/* Console Logu: Wed May 21 2014 00:00:00 GMT-0700 (Pacific Daylight Time)ISO: Tue May 20 2014 17:00:00 GMT-0700 (Pacific Daylight Time)*/which makes it somewhat required to pass in the "u" format to get the parseDate function to not auto-adjust for a timezone that hasn't been included in the string. As such, it would be nice if the "u" format also accepted the more standard T delimiter rather than requiring me to manually replace it with a space in every instance that I need to parse the date.
0
Hello Bobby,
The purpose of the "Z" symbol is to notify the parser that the date string is in UTC time and needs to be adjusted to the local time zone of the browser. If you would like to ignore this behavior, then you will need to remove the "Z" symbol or use parse format without "Z":
The aforementioned "u" format, actually, defines the "Z" symbol as a "character" and that is why the parser does not adjust the date. If you pass the same value to the JavaScript Date parser, the date will be adjusted:
Regards,
Georgi Krustev
Telerik
The purpose of the "Z" symbol is to notify the parser that the date string is in UTC time and needs to be adjusted to the local time zone of the browser. If you would like to ignore this behavior, then you will need to remove the "Z" symbol or use parse format without "Z":
yyyy-MM-dd HH:mm:ssThe aforementioned "u" format, actually, defines the "Z" symbol as a "character" and that is why the parser does not adjust the date. If you pass the same value to the JavaScript Date parser, the date will be adjusted:
new Date("2014-05-21 00:00:00Z") //use modern browserRegards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!