Kendo fails to parse or format UTC dates

10 posts, 0 answers
  1. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 19 Apr 2012 Link to this post

    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.

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Apr 2012 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 24 Apr 2012 Link to this post

    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.
  5. Royce
    Royce avatar
    1 posts
    Member since:
    May 2012

    Posted 04 May 2012 Link to this post

    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.
  6. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 04 May 2012 Link to this post

    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.
  7. Chanaka
    Chanaka avatar
    14 posts
    Member since:
    Jan 2012

    Posted 30 Aug 2012 Link to this post

    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  
  8. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 23 May 2014 Link to this post

    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?
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 26 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 27 May 2014 in reply to Georgi Krustev Link to this post

    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.
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 30 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready