Kendo fails to parse or format UTC dates

[Wannes]

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:

$("#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

        }

    ]

});

1. 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.
2. 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.

[Georgi Krustev]

Hello Wannes,

 
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")

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

 

 

[Wannes]

Hello Georgi,

Unfortunately the code:

new Date("2012-04-18 11:23:45Z");

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:

new Date("2012-04-18T11:23:45+0200");

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.

[Royce]

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.

[Wannes]

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.

[Chanaka]

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  

[Bobby]

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.

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
// null

Is there any chance that the parseDate function can be updated to support the actual ISO 8601 format?

[Georgi Krustev]

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

 

 

[Bobby]

Hi Georgi,

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 Log
u:  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.

[Georgi Krustev]

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":

yyyy-MM-dd HH:mm:ss

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:

new Date("2014-05-21 00:00:00Z") //use modern browser

Regards,
Georgi Krustev
Telerik